En Angular 2, también es posible realizar una navegación manual. Los siguientes son los pasos.
Step 1 - Agregue el siguiente código al archivo 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']);
}
}
Los siguientes puntos deben tenerse en cuenta sobre el programa anterior:
Declare una etiqueta html que tenga una función onBack etiquetada en el evento de clic. Por lo tanto, cuando un usuario hace clic en esto, se lo dirigirá de nuevo a la página Productos.
En la función onBack, use el router.navigate para navegar a la página requerida.
Step 2- Ahora, guarde todo el código y ejecute la aplicación usando npm. Vaya al navegador, verá el siguiente resultado.
Step 3 - Haga clic en el enlace Inventario.
Step 4 - Haga clic en el enlace 'Volver a productos', obtendrá el siguiente resultado que lo llevará de regreso a la página Productos.