詳細ガイド
ルーティング

ルーターリファレンス

以下のセクションでは、いくつかの主要なルーターの概念と用語を取り上げています。

ルーターイベント

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

ルーターイベント 詳細
NavigationStart ナビゲーションが開始されたときにトリガーされます。
RouteConfigLoadStart Routerがルート設定を遅延読み込みする前にトリガーされます。
RouteConfigLoadEnd ルートが遅延読み込みされた後にトリガーされます。
RoutesRecognized RouterがURLを解析し、ルートが認識されたときにトリガーされます。
GuardsCheckStart RouterがルーティングのGuardsフェーズを開始したときにトリガーされます。
ChildActivationStart Routerがルートの子をアクティブ化し始めたときにトリガーされます。
ActivationStart Routerがルートをアクティブ化し始めたときにトリガーされます。
GuardsCheckEnd RouterがルーティングのGuardsフェーズを正常に完了したときにトリガーされます。
ResolveStart RouterがルーティングのResolveフェーズを開始したときにトリガーされます。
ResolveEnd RouterがルーティングのResolveフェーズを正常に完了したときにトリガーされます。
ChildActivationEnd Routerがルートの子のアクティブ化を完了したときにトリガーされます。
ActivationEnd Routerがルートのアクティブ化を完了したときにトリガーされます。
NavigationEnd ナビゲーションが正常に終了したときにトリガーされます。
NavigationCancel ナビゲーションがキャンセルされたときにトリガーされます。これは、ナビゲーション中にルートガードがfalseを返すか、UrlTreeまたはRedirectCommandを返すことによってリダイレクトされた場合に発生します。
NavigationError 予期せぬエラーによりナビゲーションが失敗したときにトリガーされます。
Scroll スクロールイベントを表します。

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

ルーター用語

主なRouter用語とその意味を以下に示します。

ルーターの要素 詳細
Router アクティブなURLに対応するアプリケーションコンポーネントを表示します。あるコンポーネントから次のコンポーネントへのナビゲーションを管理します。
provideRouter アプリケーションビュー間をナビゲートするために必要なサービスプロバイダーを提供します。
RouterModule アプリケーションビュー間をナビゲートするために必要なサービスプロバイダーとディレクティブを提供する独立したNgModuleです。
Routes URLパスをコンポーネントにマッピングするRouteの配列を定義します。
Route URLパターンに基づいてルーターがコンポーネントにナビゲートする方法を定義します。ほとんどのルートは、パスとコンポーネントタイプで構成されます。
RouterOutlet ルーターがビューを表示する場所を示すディレクティブ (<router-outlet>) です。
RouterLink クリック可能なHTML要素をルートにバインドするためのディレクティブです。_文字列_または_リンクパラメーター配列_にバインドされたrouterLinkディレクティブを持つ要素をクリックすると、ナビゲーションがトリガーされます。
RouterLinkActive 関連するrouterLinkが要素内または要素上でアクティブ/非アクティブになったときに、HTML要素からクラスを追加/削除するためのディレクティブです。アクセシビリティ向上のため、アクティブなリンクのaria-currentを設定することもできます。
ActivatedRoute ルートパラメーター、静的データ、解決済みデータ、グローバルクエリパラメーター、グローバルフラグメントなどのルート固有の情報を含む、各ルートコンポーネントに提供されるサービスです。
RouterState 現在アクティブなルートのツリーと、ルートツリーを走査するための便利なメソッドを含む、ルーターの現在の状態です。
リンクパラメーター配列 ルーターがルーティング命令として解釈する配列です。この配列をRouterLinkにバインドしたり、Router.navigateメソッドの引数として渡したりできます。
ルーティングコンポーネント ルーターナビゲーションに基づいてビューを表示する、RouterOutletを持つAngularコンポーネントです。

<base href>

ルーターは、ナビゲーションにブラウザのhistory.pushStateを使用します。 pushStateを使用すると、アプリケーション内のURLパスをカスタマイズできます。例: localhost:4200/crisis-center。 アプリケーション内のURLは、サーバーURLと区別できない場合があります。

最新のHTML5ブラウザが最初にpushStateをサポートしたため、多くの人がこれらのURLを「HTML5スタイル」URLと呼んでいます。

HELPFUL: HTML5スタイルのナビゲーションはルーターのデフォルトです。 LocationStrategyとブラウザURLスタイルのセクションで、HTML5スタイルが推奨される理由、その動作を調整する方法、必要に応じて古いハッシュ(#)スタイルに切り替える方法を学びましょう。

pushStateルーティングを機能させるには、アプリケーションのindex.htmlに<base href>要素を追加する必要があります。 ブラウザは、CSSファイル、スクリプト、画像を相対URLで参照する際に、<base href>の値をプレフィックスとして使用します。

<base>要素は<head>タグの直後に追加します。 appフォルダがこのアプリケーションのアプリケーションルートである場合、index.htmlのhref値をここに示されているように設定します。

src/index.html (base-href)

<!DOCTYPE html><html lang="en">  <head>    <!-- Set the base href -->    <base href="/">    <title>Angular Router</title>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1">  </head>  <body>    <app-root></app-root>  </body></html>

HTML5 URLと<base href>

以下のガイドラインでは、URLのさまざまな部分について言及します。 この図は、それらの部分が何を参照しているかを示しています。

foo://example.com:8042/over/there?name=ferret#nose\_/   \______________/\_________/ \_________/ \__/ |           |            |            |        |scheme    authority      path        query   fragment

ルーターはデフォルトでHTML5 pushStateスタイルを使用しますが、その戦略を<base href>で設定する必要があります。

この戦略を設定する推奨される方法は、index.htmlの<head>に<base href>要素タグを追加することです。

<base href="/">

そのタグがないと、アプリケーションに「ディープリンク」した場合、ブラウザがリソース（画像、CSS、スクリプト）をロードできない可能性があります。

一部の開発者は、<head>またはindex.htmlにアクセスできないなどの理由で、<base>要素を追加できない場合があります。

そのような開発者でも、以下の2つの手順を実行することでHTML5 URLを使用できます。

  1. ルーターに適切なAPP_BASE_HREF値を提供します。

  2. すべてのWebリソース（CSS、画像、スクリプト、テンプレートHTMLファイル）にルートURL（authorityを持つURL）を使用します。

    • <base href>のpathは"/"で終わる必要があります。ブラウザは、最も右の"/"に続くpath内の文字を無視するためです。

    • <base href>にquery部分が含まれている場合、queryは、ページ内のリンクのpathが空でqueryがない場合にのみ使用されます。 これは、<base href>内のqueryがHashLocationStrategyを使用している場合にのみ含まれることを意味します。

    • ページ内のリンクがルートURL（authorityを持つ）である場合、<base href>は使用されません。 このように、authorityを持つAPP_BASE_HREFは、Angularによって作成されたすべてのリンクが<base href>の値を無視するようにします。

    • <base href>内のフラグメントは_決して_保持されません。

<base href>がターゲットURIの構築にどのように使用されるかについてのより完全な情報は、参照の変換に関するRFCセクションを参照してください。

HashLocationStrategy

AppModuleのRouterModule.forRoot()の2番目の引数として、オブジェクト内でuseHash: trueを提供することでHashLocationStrategyを使用します。

providers: [  provideRouter(appRoutes, withHashLocation())]

RouterModule.forRootを使用する場合、これは2番目の引数RouterModule.forRoot(routes, {useHash: true})でuseHash: trueを使用して設定されます。