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.