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.