Winkel 2 - Navigation

In Angular 2 ist es auch möglich, eine manuelle Navigation durchzuführen. Es folgen die Schritte.

Step 1 - Fügen Sie der Datei Inventory.component.ts den folgenden Code hinzu.

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']); 
   } 
}

Die folgenden Punkte müssen zum obigen Programm beachtet werden:

Deklarieren Sie ein HTML-Tag mit einer onBack-Funktion, die dem Klickereignis zugeordnet ist. Wenn ein Benutzer darauf klickt, wird er zurück zur Seite "Produkte" geleitet.
Verwenden Sie in der Funktion onBack die Datei router.navigate, um zur gewünschten Seite zu navigieren.

Step 2- Speichern Sie nun den gesamten Code und führen Sie die Anwendung mit npm aus. Gehen Sie zum Browser, Sie sehen die folgende Ausgabe.