Angular 2 - Gezinme

Angular 2'de manuel navigasyon yapmak da mümkündür. Adımlar aşağıdadır.

Step 1 - Aşağıdaki kodu Inventory.component.ts dosyasına ekleyin.

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

Yukarıdaki program hakkında aşağıdaki noktalara dikkat edilmesi gerekir -

  • Click etkinliğine etiketlenmiş bir onBack işlevi olan bir html etiketi bildirin. Böylece, bir kullanıcı bunu tıkladığında, Ürünler sayfasına geri yönlendirilecektir.

  • OnBack işlevinde, gerekli sayfaya gitmek için yönlendiriciyi kullanın.

Step 2- Şimdi tüm kodu kaydedin ve uygulamayı npm kullanarak çalıştırın. Tarayıcıya gidin, aşağıdaki çıktıyı göreceksiniz.

Step 3 - Envanter bağlantısını tıklayın.

Step 4 - 'Ürünlere geri dön' bağlantısını tıklayın, sizi Ürünler sayfasına geri götüren aşağıdaki çıktıyı alacaksınız.