Angularでrouter.navigateByUrlとrouter.navigateを使用する方法

質問

https://angular.io/api/router/RouterLink には、Angular4でユーザーを別のルートに連れて行くリンクを作成する方法の概要が書かれていますが、ユーザーがリンクをクリックするのではなく、プログラム的に同じことを行う方法が見つかりません。

どのように解決するのですか？

URLを指定する

routerLink ディレクティブはこのように使用されます。

<a [routerLink]="/inbox/33/messages/44">Open Message 44</a>

を使った命令型ナビゲーションの単なるラッパーです。 router とその navigateByUrl メソッドと同じです。

router.navigateByUrl('/inbox/33/messages/44')

というように、ソースからわかるように

export class RouterLink {
  ...

  @HostListener('click')
  onClick(): boolean {
    ...
    this.router.navigateByUrl(this.urlTree, extras);
    return true;
  }

したがって、ユーザーを別のルートに移動させる必要がある場合は、単に router を注入し navigateByUrl メソッドを使用します。

class MyComponent {
   constructor(router: Router) {
      this.router.navigateByUrl(...);
   }
}

ナビゲート

ルーターにはもう一つの方法があり、それを利用することができます -。 ナビゲート :

router.navigate(['/inbox/33/messages/44'])

違い

使用方法 router.navigateByUrl を使うのは、ロケーションバーを直接変更するのと同じです。 を直接変更するのと同じです。一方 router.navigate は渡されたコマンドの配列、つまりパッチを現在の URL に適用することで新しい URL を作成します。 コマンドの配列、つまりパッチを現在の URL に適用することによって新しい URL を作成します。

この違いを明確にするために、現在の URL が '/inbox/11/messages/22(popup:compose)' .

この URL で router.navigateByUrl('/inbox/33/messages/44') を呼び出すと、結果として '/inbox/33/messages/44' . しかし、これを router.navigate(['/inbox/33/messages/44']) で呼び出すと、結果的に '/inbox/33/messages/44(popup:compose)' .

続きを読む 公式ドキュメント .