絶対パスルーティング
ナビゲーションのための2つの方法があります、.navigate()
と.navigateByUrl()
.navigateByUrl()
絶対パスルーティングのメソッドを使用できます。
import {Router} from '@angular/router';
constructor(private router: Router) {}
navigateToLogin() {
this.router.navigateByUrl('/login');
}
ナビゲートするコンポーネントのURLへの絶対パスを入力します。
注:ルーターのnavigateByUrl
メソッドを呼び出すときは、常に完全な絶対パスを指定してください。絶対パスは先頭で始まる必要があります/
// Absolute route - Goes up to root level
this.router.navigate(['/root/child/child']);
// Absolute route - Goes up to root level with route params
this.router.navigate(['/root/child', crisis.id]);
相対パスルーティング
相対パスルーティングを使用する場合は、.navigate()
メソッドを使用します。
注:ルーティング、特に親ルート、兄弟ルート、および子ルートの動作は少し直感的ではありません。
// Parent route - Goes up one level
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });
// Sibling route - Stays at the current level and moves laterally,
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });
// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });
// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });
// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'.
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });
または、現在のルートパス内を移動するだけで、別のルートパラメータに移動する必要がある場合:
// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });
リンクパラメータ配列
リンクパラメータ配列には、ルータナビゲーションの次の要素が含まれています。
- 宛先コンポーネントへのルートのパス。
['/hero']
- ルートURLに入る必須およびオプションのルートパラメータ。
['/hero', hero.id]
または['/hero', { id: hero.id, foo: baa }]
ディレクトリのような構文
ルーターは、リンクパラメーターリストでディレクトリのような構文をサポートし、ルート名の検索をガイドします。
./
または、現在のレベルに関連する先行スラッシュがない。
../
ルートパスの1つ上のレベルに移動します。
相対ナビゲーション構文を祖先パスと組み合わせることができます。兄弟ルートにナビゲートする必要がある場合は、../<sibling>
規則を使用して1レベル上に移動し、兄弟ルートパスを上下に移動できます。
相対ナギベーションに関する重要な注意事項
Router.navigate
メソッドで相対パスをナビゲートするにActivatedRoute
は、を指定して、現在のルートツリーのどこにいるかをルーターに知らせる必要があります。
リンクパラメータ配列の後に、relativeTo
プロパティをに設定したオブジェクトを追加しますActivatedRoute
。次に、ルーターはアクティブなルートの場所に基づいてターゲットURLを計算します。
Angular Routerの公式ドキュメントから