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.

Step 3 - Klik tautan Inventaris.

Step 4 - Klik tautan 'Kembali ke produk', Anda akan mendapatkan hasil berikut yang akan membawa Anda kembali ke halaman Produk.