web-dev-qa-db-ja.com

Angularでrouter.navigateByUrlおよびrouter.navigateを使用する方法

https://angular.io/api/router/RouterLink は、Angular4でユーザーを別のルートに導くリンクを作成する方法の概要を説明しますが、方法がわかりませんプログラムではなく、ユーザーがリンクをクリックする必要がある同じこと

angularroutesrouterlink
30
Michael

navigateByUrl

次のように使用される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(...);
   }
}

ナビゲートする

使用できる別の方法がルーターにあります- navigate ：

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

2つの違い

router.navigateByUrlを使用することは、ロケーションバーを直接変更することに似ています。「全体」の新しいURLを提供しています。一方、router.navigateは、渡されたコマンドの配列、パッチを現在の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)'になります。

詳しくは 公式ドキュメント をご覧ください。

60
Max Koretskyi aka Wizard

提供された答えに加えて、navigateの詳細があります。関数のコメントから：

/**
 * Navigate based on the provided array of commands and a starting point.
 * If no starting route is provided, the navigation is absolute.
 *
 * Returns a promise that:
 * - resolves to 'true' when navigation succeeds,
 * - resolves to 'false' when navigation fails,
 * - is rejected when an error happens.
 *
 * ### Usage
 *
 * ```
 * router.navigate(['team', 33, 'user', 11], {relativeTo: route});
 *
 * // Navigate without updating the URL
 * router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
 * ```
 *
 * In opposite to `navigateByUrl`, `navigate` always takes a delta that is applied to the current
 * URL.
 */

ルーターガイド には、プログラムによるナビゲーションの詳細が記載されています。

5
Splaktar