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

補(bǔ)助ルートとは何ですか?

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

Angular の各コンポーネントは 1 つのプライマリ ルートと任意の數(shù)の補(bǔ)助アウトレットを持つことができ、コンポーネント內(nèi)で一意の名前を持つ必要があります。

補(bǔ)助ルートの設(shè)定

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

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

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

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

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

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

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

ステップ 2: ルーターで補(bǔ)助ルートを構(gòu)成する

テンプレートで名前付きアウトレットを設(shè)定した後、ルーター設(shè)定で補(bǔ)助ルートを定義します。 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 をページ アウトレットにロードする補(bǔ)助ルートです。

ステップ 3: 補(bǔ)助ルートへの移動(dòng)

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

例:

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

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

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

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

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

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

一般的な使用例

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

詳細(xì)なトークビデオ:

結(jié)論

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

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

以上がAngular の補(bǔ)助ルートの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。