Angular の補助ルート-jsチュートリアル-php.cn

Angular の補助ルート

Susan Sarandon

リリース： 2024-11-13 04:26:02

オリジナル

155 人が閲覧しました

この記事では、補助ルートの仕組み、名前付きルーターアウトレットの定義と設定方法、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 を開きます。

一般的な使用例

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

詳細なトークビデオ:

Auxiliary Routes in Angular

結論

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

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

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