Angularルーター:RouterLink、Navigate、またはNavigateByUrlを使用したナビゲーション
序章
Angularでは、 RouterLink
別のルート宣言的にナビゲートするためのディレクティブです。 Router.navigate
と Router.navigateByURL
利用可能な2つの方法です Router
コンポーネントクラスで必須をナビゲートするクラス。
使い方を探りましょう RouterLink
, Router.navigate
、 と Router.navigateByURL
.
RouterLinkの使用
HTMLの一般的なリンクは次のようになります。
<a href="/example">
Example HTML link.
</a>
このリンク例は、ユーザーを /example
ページ。
ただし、シングルページアプリケーション(SPA)には、リンクする別のページはありません。 代わりに、ユーザーに表示するさまざまなビューがあります。 ユーザーがナビゲートしてビューを変更できるようにするには、 RouterLink
の代わりにディレクティブ href
:
<a routerLink="/users/sammy">
Link that uses a string.
</a>
これ RouterLink
例では、ユーザーを次のコンポーネントに誘導します /users/sammy
.
さまざまなURLセグメントを、次のような配列で渡すこともできます。
<a [routerLink]="['/', 'users', 'sammy']">
Link that uses an array.
</a>
これらの2つの例はフォーマットが異なりますが、同じコンポーネントに向けられます。 /users/sammy
.
相対パス
使用できます '../
次のようなものを使用して、ナビゲーションの上位レベルに移動します。
<a [routerLink]="['../', 'posts', 'sammy']">
Link that goes up a level.
</a>
その例では、ユーザーが /users/sammy
、ナビゲーションはに変わります /posts/sammy
.
最初のURLセグメントの前に ./
, ../
、または先頭のスラッシュなし。
パラメーター
URLセグメントのリストにあるオブジェクトを使用して、ナビゲーションにパラメータを渡すことができます。
<a [routerLink]="['/', 'users', {display: 'verbose'}, 'sammy']">
Link with parameter.
</a>
その例では、 Router
に移動します /users;display=verbose/sammy
.
名前付きアウトレット
あなたは言うことができます Router
名前付きに何を配置するか outlet
このようなもので:
<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'] } }]">
Link with a side outlet.
</a>
その例では、 sammy
セグメントはに配置されます outlet
名前付き side
.
伝えることも可能です Router
複数の名前で何を配置するか outlet
s次のようなもの:
<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'], footer: ['sharks'] } }]">
Link with a side and footer outlets.
</a>
この例では、 sammy
セグメントはに配置されます outlet
名前付き side
そしてその sharks
セグメントはに配置されます outlet
名前付き footer
.
ルーターの使用
Angularで利用できる方法は2つあります Router
コンポーネントクラスで必須にナビゲートするクラス: Router.navigate
と Router.navigateByUrl
. どちらのメソッドも、次のように解決されるpromiseを返します。 true
ナビゲーションが成功した場合、 null
ナビゲーションがない場合は、 false
ナビゲーションが失敗した場合、またはエラーが発生した場合は完全に拒否されます。
いずれかの方法を使用するには、最初に次のことを確認する必要があります Router
クラスはコンポーネントクラスに注入されます。
まず、インポート Router
コンポーネントクラスに:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
それから加えて Router
依存関係へ:
@Component({
// ...
})
export class AppComponent {
constructor(private router: Router) {
// ...
}
// ...
}
今、あなたは使用することができます Router.navigate
また Router.navigateByUrl
.
Router.navigate
URLセグメントの配列をに渡します Router.navigate
.
これは、を使用した基本的な例です。 Router.navigate
方法:
goPlaces() {
this.router.navigate(['/', 'users']);
}
そして、これがその方法を示す例です Router.navigate
thenable :
goPlaces() {
this.router.navigate(['/', 'users'])
.then(nav => {
console.log(nav); // true if navigation is successful
}, err => {
console.log(err) // when there's an error
});
}
もしも Router.navigate
この例で成功すると、次のように表示されます true
. もしも Router.navigate
この例では失敗すると、エラーが表示されます。
Router.navigateByUrl
Router.navigateByUrl
と類似しています Router.navigate
、ただし、URLセグメントの代わりに文字列が渡されます。 ナビゲーションは絶対的で、 /
.
これは、を使用した基本的な例です。 Router.navigateByUrl
方法:
goPlaces() {
this.router.navigateByUrl('/users;display=verbose/sammy');
}
この例では、 Router.navigateByUrl
に移動します /users;display=verbose/sammy
.
結論
この記事では、Angularアプリケーションでのナビゲーションについて学びました。 あなたはに紹介されました RouterLink
, Router.navigate
、 と Router.navigateByURL
.
Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。