Angular 2 - Navigasi

Di Angular 2, juga dimungkinkan untuk melakukan navigasi manual. Berikut langkah-langkahnya.

Step 1 - Tambahkan kode berikut ke 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']); 
   } 
}

Poin-poin berikut perlu diperhatikan tentang program di atas -

Deklarasikan tag html yang memiliki fungsi onBack yang diberi tag ke acara klik. Jadi, ketika pengguna mengklik ini, mereka akan diarahkan kembali ke halaman Produk.
Dalam fungsi onBack, gunakan router.navigate untuk membuka halaman yang diperlukan.

Step 2- Sekarang, simpan semua kodenya dan jalankan aplikasi menggunakan npm. Masuk ke browser, Anda akan melihat output berikut.