ルーターリファレンス

以下のセクションでは、ルーターの基本的な概念について説明します。

ルーターのインポート

Angular Routerは、特定のURLに対して特定のコンポーネントビューを表示するオプションのサービスです。 Angularのコアには含まれていないため、独自のライブラリパッケージ @angular/router に含まれています。

他のAngularパッケージと同じように、必要なものをインポートします。

      
import { provideRouter } from '@angular/router';
    

設定

ルーティングされたAngularアプリケーションには、Router サービスのシングルトンインスタンスが1つあります。 ブラウザのURLが変更されると、そのルーターは、表示するコンポーネントを判断できる対応する Route を探します。

ルーターは、設定するまでルートを持ちません。 次の例では、5つのルート定義を作成し、provideRouter メソッドを使用してルーターを設定し、その結果を ApplicationConfig の providers 配列に追加します。

      
const appRoutes: Routes = [  { path: 'crisis-center', component: CrisisListComponent },  { path: 'hero/:id',      component: HeroDetailComponent },  {    path: 'heroes',    component: HeroListComponent,    data: { title: 'Heroes List' }  },  { path: '',    redirectTo: '/heroes',    pathMatch: 'full'  },  { path: '**', component: PageNotFoundComponent }];export const appConfig: ApplicationConfig = {    providers: [provideRouter(appRoutes, withDebugTracing())]}
    

routes ルートの配列は、ナビゲーションの方法を記述します。 ApplicationConfig providers 内の provideRouter メソッドに渡して、ルーターを設定します。

各 Route は、URL path をコンポーネントにマッピングします。 パスに先頭のスラッシュはありません。 ルーターは、最終的なURLを解析して構築します。これにより、アプリケーションビュー間を移動する際に、相対パスと絶対パスの両方を使用できます。

2番目のルートの :id は、ルートパラメーターのトークンです。 /hero/42 などのURLでは、「42」は id パラメーターの値です。 対応する HeroDetailComponent は、その値を使用して、id が42であるヒーローを見つけ、表示します。

3番目のルートの data プロパティは、この特定のルートに関連付けられた任意のデータを格納するための場所です。 data プロパティは、各アクティブなルート内でアクセスできます。 ページタイトル、パンくずリストのテキスト、その他の読み取り専用、静的なデータを格納するために使用します。 解決ガードを使用して動的なデータを取得します。

4番目のルートの空のパスは、アプリケーションのデフォルトパスを表します。URLのパスが空の場合に移動する場所です。これは、通常、開始時には空です。 このデフォルトルートは、/heroes URLのルートにリダイレクトするため、HeroesListComponent が表示されます。

ナビゲーションライフサイクル中に発生しているイベントを確認する必要がある場合は、withDebugTracing 機能があります。 これにより、ブラウザのコンソールに、各ナビゲーションライフサイクル中に発生した各ルーターイベントが出力されます。 withDebugTracing は、デバッグ目的でのみ使用します。 withDebugTracing オプションは、provideRouter メソッドに渡されるオブジェクトの2番目の引数として設定します。

ルーターアウトレット

RouterOutlet は、ルーターライブラリのディレクティブであり、コンポーネントのように使用されます。 これは、ルーターがそのアウトレットのコンポーネントを表示する必要があるテンプレート内の場所を示すプレースホルダーとして機能します。

      
<router-outlet></router-outlet><!-- ルーティングされたコンポーネントはここにあります -->
    

上記の設定により、このアプリケーションのブラウザのURLが /heroes になると、ルーターはそのURLをルートパス /heroes に一致させます。また HeroListComponent を、ホストコンポーネントのテンプレートに配置した RouterOutlet の兄弟要素として表示します。

ルーターリンク

アンカータグのクリックなどのユーザーアクションの結果としてナビゲートするには、RouterLink を使用します。

次のテンプレートを検討してください。

      
<h1>Angular Router</h1><nav>  <a routerLink="/crisis-center" routerLinkActive="active" ariaCurrentWhenActive="page">Crisis Center</a>  <a routerLink="/heroes" routerLinkActive="active" ariaCurrentWhenActive="page">Heroes</a></nav><router-outlet></router-outlet>
    

アンカータグの RouterLink ディレクティブにより、ルーターはこれらの要素を制御します。 ナビゲーションパスは固定されているため、routerLink に文字列を1回バインドできます。

ナビゲーションパスがより動的であった場合、ルートリンクパラメーターの配列を返すテンプレート式にバインドできます。つまり、リンクパラメーター配列 です。 ルーターは、その配列を完全な URL に解決します。

アクティブなルーターリンク

RouterLinkActive ディレクティブは、現在の RouterState に基づいて、アクティブな RouterLink バインドの CSS クラスを切り替えます。

各アンカータグには、RouterLinkActive ディレクティブへのプロパティバインド が表示されます。これは、

      
routerLinkActive="..."
    

等号、= の右側のテンプレート式には、ルーターがリンクがアクティブな場合に追加し、リンクが非アクティブな場合に削除するCSSクラスのスペース区切り文字列が含まれています。 RouterLinkActive ディレクティブを routerLinkActive="active fluffy" などのクラスの文字列に設定するか、そのような文字列を返すコンポーネントプロパティにバインドします。 たとえば、

      
[routerLinkActive]="someStringProperty"
    

アクティブなルートリンクは、ルートツリーの各レベルをカスケードダウンするため、親と子のルーターリンクが同時にアクティブになる可能性があります。 この動作をオーバーライドするには、{ exact: true } 式を使用して、[routerLinkActiveOptions] 入力バインドにバインドします。 { exact: true } を使用することにより、特定の RouterLink は、そのURLが現在のURLと完全に一致する場合にのみアクティブになります。

RouterLinkActive を使用すると、アクティブな要素に aria-current 属性を簡単に適用できます。これにより、すべてのユーザーにとってよりアクセスしやすいエクスペリエンスが提供されます。詳細については、アクセシビリティのベストプラクティスアクティブなリンクの識別セクション を参照してください。

ルーターステート

各成功したナビゲーションライフサイクルの終わりに、ルーターは、ルーターの現在の状態を構成する ActivatedRoute オブジェクトのツリーを構築します。 Router サービスと routerState プロパティを使用して、アプリケーション内のどこからでも現在の RouterState にアクセスできます。

RouterState の各 ActivatedRoute は、ルートツリーを上下に移動して、親、子、兄弟ルートから情報を入手するためのメソッドを提供します。

アクティブなルート

ルートパスとパラメーターは、ActivatedRoute と呼ばれる注入されたルーターサービスを通じて利用できます。 これには、次の多くの便利な情報が含まれています。

ルーターイベント

各ナビゲーション中に、Router は、Router.events プロパティを通じてナビゲーションイベントを発行します。 これらのイベントは、次の表に示されています。

withDebugTracing 機能を有効にすると、Angularはこれらのイベントをコンソールに出力します。

ルーターの用語

以下は、Router の主要な用語とその意味です。