Angular 2 - Navigazione

In Angular 2 è anche possibile effettuare la navigazione manuale. Di seguito sono riportati i passaggi.

Step 1 - Aggiungi il seguente codice al file Inventory.component.ts.

import { Component } from '@angular/core'; 
import { Router }  from '@angular/router';  

@Component ({  
   selector: 'my-app',  
   template: 'Inventory 
   <a class = "button" (click) = "onBack()">Back to Products</a>' 
})  

export class AppInventory {  
   constructor(private _router: Router){} 

   onBack(): void { 
      this._router.navigate(['/Product']); 
   } 
}

I seguenti punti devono essere annotati sul programma di cui sopra:

• Dichiarare un tag html che ha una funzione onBack taggata all'evento click. Pertanto, quando un utente fa clic su questo, verrà reindirizzato alla pagina Prodotti.

• Nella funzione onBack, utilizzare router.navigate per navigare alla pagina richiesta.

Step 2- Ora salva tutto il codice ed esegui l'applicazione usando npm. Vai al browser, vedrai il seguente output.

Step 3 - Fare clic sul collegamento Inventario.

Step 4 - Fai clic sul link "Torna ai prodotti", otterrai il seguente output che ti riporta alla pagina Prodotti.