Angularルーター:RouterLink、Navigate、またはNavigateByUrlを使用したナビゲーション
序章
Angularでは、RouterLink
は別のルートを宣言的ににナビゲートするためのディレクティブです。 Router.navigate
とRouter.navigateByURL
は、コンポーネントクラスで必須をナビゲートするためにRouter
クラスで使用できる2つのメソッドです。
RouterLink
、Router.navigate
、およびRouter.navigateByURL
の使用方法を見てみましょう。
RouterLinkの使用
HTMLの一般的なリンクは次のようになります。
<a href="/example"> Example HTML link. </a>
このリンク例は、ユーザーを/example
ページに誘導します。
ただし、シングルページアプリケーション(SPA)には、リンクする別のページはありません。 代わりに、ユーザーに表示するさまざまなビューがあります。 ユーザーがナビゲートしてビューを変更できるようにするには、href
の代わりにRouterLink
ディレクティブを使用する必要があります。
<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
セグメントはside
という名前のoutlet
に配置されます。
Router
に、次のような名前の複数のoutlet
に何を配置するかを指示することもできます。
<a [routerLink]="['/', 'users', { outlets: { side: ['sammy'], footer: ['sharks'] } }]"> Link with a side and footer outlets. </a>
この例では、sammy
セグメントはside
という名前のoutlet
に配置され、sharks
セグメントはoutlet
に配置されます。 footer
という名前。
ルーターの使用
AngularのRouter
クラスでは、コンポーネントクラスで必須にナビゲートするためにRouter.navigate
とRouter.navigateByUrl
の2つのメソッドを使用できます。 どちらの方法でも、ナビゲーションが成功した場合はtrue
、ナビゲーションがない場合はnull
、ナビゲーションが失敗した場合はfalse
、エラーが発生した場合は完全に拒否されるpromiseが返されます。 。
いずれかの方法を使用するには、最初に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
を使用できます。
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.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トピックページで演習とプログラミングプロジェクトを確認してください。