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

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

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

import { Router } from "@angular/router";

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

export class AppComponent {
	constructor(private router: Router) {
	
	}
}

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

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

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

<button (click)="go()">btn</button>

ボタンを2つ作成してください。1つ目のボタンで一つのURLに、2つ目のボタンで別のURLに移動するようにします。