Other common Routing Tasks

This guide covers some other common tasks associated with using Angular router in your application.

ルート情報の取得

多くの場合、ユーザーがアプリケーションをナビゲートするときに、一方のコンポーネントからもう一方のコンポーネントに情報を渡す必要があります。 たとえば、食料品のショッピングリストを表示するアプリケーションを考えてみてください。 リストの各アイテムには、一意の 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(heroId));
       

   NOTE: すべてのルートデータを、キーと値のペアでコンポーネントの入力にバインドできます。静的なルートデータ、解決されたルートデータ、パスパラメータ、マトリックスパラメータ、クエリパラメータです。 親コンポーネントのルート情報を使用する場合は、ルーターの paramsInheritanceStrategy オプションを設定する必要があります。 withRouterConfig({paramsInheritanceStrategy: 'always'})

404 ページの表示

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

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

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

権限のないアクセスの防止

ルートガードを使用して、ユーザーが権限なしでアプリケーションの特定の部分にナビゲートできないようにします。 Angularでは、次のルートガードを使用できます。

ルートガードを使用するには、コンポーネントレスルート を使用することを検討してください。これにより、子ルートのガードが容易になります。

ガードのファイルを作成します。

      
ng generate guard your-guard
    

ガードファイルに、使用するガード関数を追加します。 次の例では、canActivateFn を使用してルートをガードしています。

      
export const yourGuardFunction: CanActivateFn = (  next: ActivatedRouteSnapshot,  state: RouterStateSnapshot) => {  // your  logic goes here}
    

ルーティングモジュールで、routes 構成の適切なプロパティを使用します。 ここでは、canActivate は、ルーターに、この特定のルートへのナビゲーションを仲介するよう指示します。

      
{  path: '/your-path',  component: YourComponent,  canActivate: [yourGuardFunction],}
    

リンクパラメータ配列

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

• 宛先コンポーネントへのルートのパス
• ルート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>
    

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

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

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

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

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

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

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

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

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

      
@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 AppComponent {}
    

要約すると、ルーティングが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 に切り替えることもできます。