Angularでのプログラムナビゲーション

URL間の移動はリンクだけでなく、JavaScriptコード内で特別なコマンドを使って行うこともできます。

これは、Routerサービスを使って行います。 その使い方を見てみましょう。まずはインポートします。

app/app.component.tsimport { Router } from "@angular/router";

次に、依存性注入を使ってコンポーネントに注入します。

app/app.component.tsexport class AppComponent {
  constructor(private router: Router) {
  
  }
}

このサービスには、指定されたURLに移動するnavigateメソッドがあります。 このメソッドを使ってみましょう。

app/app.component.tsexport class AppComponent {
  constructor(private router: Router) {
  
  }
  
  go() {
    this.router.navigate(['/aaaa/']);
  }
}

次に、ボタンクリックでgoメソッドを呼び出してみましょう。

app/app.component.html<button (click)="go()">btn</button>