Angular の補助ルート

この記事では、補助ルートの仕組み、名前付きルーター アウトレットの定義と設定方法、Angular アプリケーションでの実装のベスト プラクティスについて説明します。

補助ルートとは何ですか?

補助ルート (セカンダリ ルートとも呼ばれます) を使用すると、複数の独立したルートを Angular アプリケーションに追加して、アプリのナビゲーションおよびインタラクション機能を強化できます。ページのメイン コンテンツを決定するプライマリ ルートとは異なり、補助ルートは、ユーザーのメイン ビューを中断することなくプライマリ コンテンツと並んで表示できるセカンダリ コンテンツとして機能します。これらは通常、サイドバー、モーダル、インターフェイスの追加セクションなどのコンポーネントに使用されます。

Angular の各コンポーネントは 1 つのプライマリ ルートと任意の数の補助アウトレットを持つことができ、コンポーネント内で一意の名前を持つ必要があります。

補助ルートの設定

補助ルートを定義するには、補助ルートのコンテンツをレンダリングするテンプレート内に名前付きルーター アウトレットを作成する必要があります。この方法で複数のアウトレットを設定すると、UI のさまざまな部分を個別に管理できます。

ここでは、Angular での補助ルートの設定に関するステップバイステップのガイドを示します。

ステップ 1: 名前付きルーター アウトレットを定義する

補助ルートを使用するには、まず、セカンダリ ルートのコンテンツを表示するテンプレート内の名前付きアウトレットを追加します。例:

<div>
    <router-outlet name="pages"></router-outlet>
</div>

<!-- Primary router-outlet for main content -->
<router-outlet></router-outlet>

ここに、補助ルートのコンテンツがレンダリングされる名前付きアウトレットがあります。通常、プライマリ ナビゲーションに使用されるメイン ルーター アウトレットとは独立して、個別のルート コンテンツを表示できます。

ステップ 2: ルーターで補助ルートを構成する

テンプレートで名前付きアウトレットを設定した後、ルーター設定で補助ルートを定義します。 Angular は、ルート定義のアウトレット プロパティを使用して、ルートをレンダリングするアウトレットを指定します。

これが例です:

const routes = [
    {
        path: '',
        loadComponent: () =>
            import('./pages/homepage/homepage.component').then(c => c.HomepageComponent)
    },
    {
        path: 'experience',
        loadComponent: () =>
            import('./pages/experience/experience.component').then(c => c.ExperienceComponent),
        outlet: 'pages'  // Specify the named outlet for this route
    }
];

この例では:

プライマリ ルート (空のパス) は HomepageComponent を読み込みます。
エクスペリエンス パスは、ExperienceComponent をページ アウトレットにロードする補助ルートです。

ステップ 3: 補助ルートへの移動

補助ルートに移動するには、Angular の RouterLink ディレクティブを特定の構文で使用します。補助ルートには、プライマリ パスと補助パスの両方を指定するセグメント化された URL 構造が必要です。

例:

<a [routerLink]="[{ outlets: { primary: '', pages: 'experience' } }]">Experience</a>

onNavigate(link: string) {
   this.router.navigate([{ outlets: { primary: '', pages: 'experience' } }]);
}

ここで、primary はメイン コンテンツ パス (この場合、ホームページの空のパス) に対応し、pages: ' experience' は、名前付きアウトレット ページの補助ルートを設定します。

ステップ 4: プログラムによる補助ルートへのアクセス

Angular の Router サービスを使用して、プログラムで補助ルートに移動することもできます。補助ルートを設定するには、navigate メソッドに渡されるオブジェクトでプライマリ ルート パスとセカンダリ ルート パスの両方を指定します。

このコードは、プライマリ アウトレットのホームページに移動し、ページの補助アウトレットで ExperienceComponent を開きます。

一般的な使用例

サイドバー: 補助ルートを使用して、主要なコンテンツを中断することなく、リンクまたは設定でサイドバーを切り替えます。
モーダルとダイアログ: 補助ルートによりモーダルの開閉が簡単になり、ユーザーはダイアログで詳細を表示したり、情報を編集したりできます。
チャットまたは通知パネル: メイン コンテンツとは別にライブ チャット、通知、またはリアルタイム フィードを表示します。

詳細なトークビデオ:

結論

Angular の補助ルートは、アプリケーションの複数のセクションを個別に管理する柔軟な方法を提供します。名前付きルーター アウトレットを定義し、アウトレット プロパティを使用してルートを構成することにより、シームレスでモジュール式のユーザー エクスペリエンスを作成できます。補助ルートは、インターフェイスの一部を独立して動作させることができるため、複雑な UI 構造を持つアプリケーションにとって特に有益です。この設定を使用すると、より魅力的で応答性の高いエクスペリエンスをユーザーに提供できます。

Angular プロジェクトで補助ルートを試して、アプリのナビゲーションとインタラクティブ性をどのように変換し、特定の要件に合わせて UX を調整できるかを確認してください。

以上がAngular の補助ルートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。