Angular 2-ナビゲーション

Angular 2では、手動ナビゲーションを実行することもできます。手順は次のとおりです。

ステップ1 *-次のコードを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']);
   }
}

上記のプログラムについて、次の点に注意する必要があります-

クリックイベントにタグ付けされたonBack関数を持つHTMLタグを宣言します。したがって、ユーザーがこれをクリックすると、製品ページに戻ります。
onBack関数で、router.navigateを使用して必要なページに移動します。

ステップ2 *-次に、すべてのコードを保存し、npmを使用してアプリケーションを実行します。ブラウザに移動すると、次の出力が表示されます。

npmを使用したアプリケーション

ステップ3 *-[インベントリ]リンクをクリックします。

在庫リンク

ステップ4 *-[製品に戻る]リンクをクリックすると、次の出力が表示され、製品ページに戻ります。

製品に戻る

Angular2-navigation

Angular 2-ナビゲーション