Angularでrouter.navigateByUrlおよびrouter.navigateを使用する方法
https://angular.io/api/router/RouterLink は、Angular4でユーザーを別のルートに導くリンクを作成する方法の概要を説明しますが、方法がわかりませんプログラムではなく、ユーザーがリンクをクリックする必要がある同じこと
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)'
になります。
詳しくは 公式ドキュメント をご覧ください。
提供された答えに加えて、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.
*/
ルーターガイド には、プログラムによるナビゲーションの詳細が記載されています。