その他の一般的なルーティングタスク

このガイドでは、アプリケーションでAngularルーターを使用する際によくあるその他のタスクについて説明します。

ルート情報の取得

多くの場合、ユーザーがアプリケーションをナビゲートするときに、一方のコンポーネントからもう一方のコンポーネントに情報を渡す必要があります。 たとえば、食料品のショッピングリストを表示するアプリケーションを考えてみてください。 リストの各アイテムには、一意の id があります。 アイテムを編集するには、ユーザーは[編集]ボタンをクリックします。これにより、EditGroceryItem コンポーネントが開きます。 そのコンポーネントは、食料品アイテムの id を取得して、ユーザーに正しい情報を表示できるようにする必要があります。

ルートを使用して、このタイプの情報をアプリケーションコンポーネントに渡します。 これを行うには、provideRouter を使用した withComponentInputBinding 機能、または RouterModule.forRoot の bindToComponentInputs オプションを使用します。

ルートから情報を取得するには:

1. withComponentInputBinding を追加する

   provideRouter メソッドに withComponentInputBinding 機能を追加します。

   providers: [provideRouter(appRoutes, withComponentInputBinding())];

2. コンポーネントに input を追加する

   パラメータ名と一致する input() プロパティを持つようにコンポーネントを更新します。

   id = input.required<string>();
   hero = computed(() => this.service.getHero(id()));

3. Optional: Use a default value

   withComponentInputBinding が有効な場合、ルーターは現在のルートに基づいてすべての入力に値を割り当てます。 オプションのクエリパラメータが欠落している場合など、ルートデータが入力キーと一致しない場合、ルーターは undefined を割り当てます。 入力がルートによって一致しない可能性がある場合は、input の型に undefined を含める必要があります。

   input の transform オプションを使用するか、linkedSignal でローカル状態を管理することで、デフォルト値を提供します。

   id = input.required({
     transform: (maybeUndefined: string | undefined) => maybeUndefined ?? '0',
   });
   // or
   id = input<string | undefined>();
   internalId = linkedSignal(() => this.id() ?? getDefaultId());

Disable query parameter binding

Use ComponentInputBindingOptions to disable query parameter binding if you manage query parameters separately:

provideRouter(appRoutes, withComponentInputBinding({queryParams: false}));

Configure behavior for inputs not available in router data

By default, the router sets an input to undefined if it was not available in the router data during a navigation. This ensures that stale data is not retained.

If you want to avoid setting undefined for inputs that have never been available in the router data for the active component instance, you can set the unmatchedInputBehavior option to 'undefinedIfStale':

provideRouter(appRoutes, withComponentInputBinding({unmatchedInputBehavior: 'undefinedIfStale'}));

When you combine unmatchedInputBehavior: 'undefinedIfStale' with queryParams: false, inputs retain their initial values unless they are explicitly provided by the router. The exception is matrix parameters: if a matrix parameter is provided in one navigation and removed in a subsequent one, the router will set the input to undefined to avoid retaining stale data.

provideRouter(
  appRoutes,
  withComponentInputBinding({
    queryParams: false,
    unmatchedInputBehavior: 'undefinedIfStale',
  }),
);

Inherit parent route data

By default, child routes inherit parameters and data from parent routes (equivalent to paramsInheritanceStrategy: 'always'). This means you can access parent route info directly in child components.

If you need to restore the legacy behavior where parameters were only inherited from empty path routes, you can set paramsInheritanceStrategy to 'emptyOnly':

provideRouter(routes, withRouterConfig({paramsInheritanceStrategy: 'emptyOnly'}));

See router configuration options for details on other available settings.

404 ページの表示

404ページを表示するには、ワイルドカードルート を設定します。このルートの component プロパティは、404ページに使用したいコンポーネントに設定します。

const routes: Routes = [
  {path: 'first-component', component: First},
  {path: 'second-component', component: Second},
  {path: '**', component: PageNotFound}, // Wildcard route for a 404 page
];

path が ** の最後のルートは、ワイルドカードルートです。 ルーターは、要求されたURLがリストの先頭にあるパスと一致しない場合、このルートを選択し、ユーザーを PageNotFound にルーティングします。

リンクパラメータ配列

リンクパラメータ配列には、ルーターナビゲーションの次の要素が含まれています。

• 宛先コンポーネントへのルートのパス
• ルートURLに含まれる、必須とオプションのルートパラメータ

次のように、RouterLink ディレクティブをこのような配列にバインドします。

<a [routerLink]="['/heroes']">Heroes</a>

ルートパラメータを指定する場合は、次の2つの要素の配列になります。

<a [routerLink]="['/hero', hero.id]">
  <span class="badge">{{ hero.id }}</span
  >{{ hero.name }}
</a>

オプションのルートパラメータは、{ foo: 'foo' } のようにオブジェクトで指定します。

<a [routerLink]="['/crisis-center', {foo: 'foo'}]">Crisis Center</a>

この構文はマトリックスパラメータを渡します。これは、特定のURLセグメントに関連付けられたオプションのパラメータです。マトリックスパラメータの詳細をご覧ください。

これらの3つの例は、ルーティングが1レベルのアプリケーションのニーズを満たしています。 ただし、危機センターなどの子ルーターを使用すると、新しいリンク配列の選択肢が生まれます。

次の最小限の RouterLink の例は、危機センターの指定されたデフォルトの子ルートを基に構築されています。

<a [routerLink]="['/crisis-center']">Crisis Center</a>

次の点を確認してください。

• 配列の最初の項目は、親ルート (/crisis-center) を識別します
• この親ルートのパラメータはありません
• 子ルートのデフォルトがないため、1つを選択する必要があります
• CrisisList にナビゲートしており、そのルートパスは / ですが、スラッシュを明示的に追加する必要はありません

危機センターのルートを排他的に使用して、App テンプレートを再定義できます。

<a [routerLink]="['/crisis-center', 1]">Dragon Crisis</a>

• 配列の最初の項目は、親ルート (/crisis-center) を識別します
• この親ルートのパラメータはありません
• 2番目の項目は、特定の危機に関する詳細の子ルートを識別します。
• 詳細の子ルートには id ルートパラメータが必要です。
• 配列の2番目の項目として、Dragon Crisisの id を追加しました。
• 結果のパスは /crisis-center/1 です。

また、Appテンプレートを危機センターのルート専用に再定義できます：

@Component({
  template: `
    <h1 class="title">Angular Router</h1>
    <nav>
      <a [routerLink]="['/crisis-center']">Crisis Center</a>
      <a [routerLink]="['/crisis-center/1', {foo: 'foo'}]">Dragon Crisis</a>
      <a [routerLink]="['/crisis-center/2']">Shark Crisis</a>
    </nav>
    <router-outlet />
  `,
})
export class App {}

要約すると、ルーティングが1レベル、2レベル、または複数レベルのアプリケーションを作成できます。 リンクパラメータ配列により、任意のルーティング深度、および任意の有効なルートパスのシーケンス、(必須) ルーターパラメータ、および (オプション) ルーターパラメータオブジェクトを表すことができます。

LocationStrategy とブラウザ URL のスタイル

ルーターが新しいコンポーネントビューにナビゲートすると、ブラウザの場所と履歴が、そのビューのURLで更新されます。

最新のHTML5ブラウザは、history.pushState をサポートしています。これは、サーバーページのリクエストをトリガーせずに、ブラウザの場所と履歴を変更するテクニックです。 ルーターは、サーバーページロードと区別できない「自然な」URLを作成できます。

この「HTML5 pushState」スタイルの危機センターのURLを示します。

localhost:3002/crisis-center

古いブラウザは、場所URLが変更された場合、変更が「#」(ハッシュ) の後に発生しない限り、サーバーにページリクエストを送信します。 ルーターは、この例外を利用して、ハッシュを含むアプリケーション内ルートURLを作成できます。 危機センターにルーティングする「ハッシュURL」を以下に示します。

localhost:3002/src/#/crisis-center

ルーターは、2つの LocationStrategy プロバイダーで、両方のスタイルをサポートしています。

RouterModule.forRoot() 関数は、LocationStrategy を PathLocationStrategy に設定します。これにより、デフォルトの戦略になります。 ブートストラッププロセス中にオーバーライドを使用して、HashLocationStrategy に切り替えることもできます。