Angulaire 2 - Navigation

Dans Angular 2, il est également possible d'effectuer une navigation manuelle. Voici les étapes.

Step 1 - Ajoutez le code suivant au fichier 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']); 
   } 
}

Les points suivants doivent être notés à propos du programme ci-dessus -

  • Déclarez une balise html dont la fonction onBack est associée à l'événement de clic. Ainsi, lorsqu'un utilisateur clique dessus, il sera redirigé vers la page Produits.

  • Dans la fonction onBack, utilisez le router.navigate pour accéder à la page requise.

Step 2- Maintenant, enregistrez tout le code et exécutez l'application en utilisant npm. Allez dans le navigateur, vous verrez la sortie suivante.

Step 3 - Cliquez sur le lien Inventaire.

Step 4 - Cliquez sur le lien «Retour aux produits», vous obtiendrez le résultat suivant qui vous ramènera à la page Produits.