ブートストラップルーターとは何ですか?

Angular の「bootstrap」パッケージは、URL が変更されたときにアプリケーション ビュー間のナビゲーションを可能にするルーター機能を実装しています。 AngularJS ユーザーは、Angular のルーティングが AngularJS ルーターと非常に似ていることに気づくでしょう。

ただし、大きな違いの 1 つは、Angular ではハッシュ ルートではなく名前付き URL ルートが使用されることです。これは、Angular では、URL で「#」を使用する代わりに、「/」を使用してルートの開始を指定することを意味します。たとえば、次は名前付きルートを使用する Angular ルーターの URL の例です。

「https://www.example.com/home」

この URL は、Angular アプリケーションに存在する「home」というコンポーネントに移動します。

Angular Router の使用を開始する

Angular ルーターを使い始めるには、`@angular/router` モジュールから `RouterModule` をインポートする必要があります。次に、「RouterModule.forRoot()」メソッドを使用してアプリケーションのルートを設定する必要があります。 `RouterModule.forRoot()` メソッドは、`Route` オブジェクトの配列を受け取ります。 「Route」オブジェクトには次のプロパティがあります。

- パス :このルートが照合する URL パターン。

- コンポーネント :URL がパスと一致する場合にこのルートがロードするコンポーネント。

- 子供 :このルートが持つことができる子ルートの配列。

- アクティベートできます :ルートをロードする前に通過する必要があるガードの配列。

以下は、単純な Angular ルーター構成の例です。

```タイプスクリプト

import { RouterModule, Routes } from '@angular/router';

const ルート:ルート =[

{ パス:'ホーム'、コンポーネント:HomeComponent }、

{ パス:'about'、コンポーネント:AboutComponent }、

];

@NgModule({

インポート:[RouterModule.forRoot(ルート)]、

エクスポート:[ルーターモジュール]

})

エクスポート クラス AppRoutingModule { }

「」

この設定では、home コンポーネント用と about コンポーネント用の 2 つのルートが定義されています。 URL がルートのパスと一致すると、ルーターは関連するコンポーネントをロードします。

Angular Router の追加機能

Angular ルーターは、次のようないくつかの追加機能を提供します。

- 遅延読み込み :Angular ルーターは、コンポーネントを遅延ロードするために使用できます。これは、コンポーネントが必要なときにのみロードされることを意味します。これにより、初期ロード時間が短縮され、アプリケーションのパフォーマンスが向上します。

- 衛兵 :ガードは、ルートが読み込まれるのを防ぐために使用できる機能です。これは、認証などの目的に役立ちます。

- リゾルバー :リゾルバーは、ルートがロードされる前にデータを取得するために使用できる関数です。これは、コンポーネントが必要とするデータをプリフェッチする場合に役立ちます。

- 子ルート :子ルートは、他のルート内にネストできるルートです。これは、アプリケーションをさまざまなセクションに整理する場合に役立ちます。

- ルートパラメータ :ルート パラメーターを使用して、コンポーネント間でデータを渡すことができます。これは、ルートによってロードされるコンポーネントにデータを渡す場合に役立ちます。

- クエリパラメータ :クエリ パラメーターを使用して、ルートにデータを渡すことができます。これは、データをフィルタリングしたり、ルートによってロードされるコンポーネントにデータを渡したりする場合に役立ちます。

Angular ルーターの詳細については、公式ドキュメントを参照してください。