everything-claude-code/docs/ja-JP/skills/angular-developer/references/show-routes-with-outlets.md

アウトレットを使ったルートの表示

RouterOutlet ディレクティブは、Angularが現在のURLに対応するコンポーネントをレンダリングするためのプレースホルダーです。

基本的な使い方

テンプレートに <router-outlet /> を含めます。Angularはルーティングされたコンポーネントをアウトレットの直後の兄弟要素として挿入します。

<app-header /> <router-outlet />
<!-- ルートのコンテンツがここに表示される -->
<app-footer />

ネストされたアウトレット

子ルートには、親コンポーネントのテンプレート内に独自の <router-outlet /> が必要です。

// 親コンポーネントのテンプレート
<h1>Settings</h1>
<router-outlet /> <!-- ProfileやSecurityなどの子コンポーネントがここにレンダリングされる -->

名前付きアウトレット（セカンダリルート）

ページには複数のアウトレットを設定できます。アウトレットに name を割り当てることで、特定のアウトレットをターゲットにできます。デフォルト名は 'primary' です。

<router-outlet />
<!-- プライマリ -->
<router-outlet name="sidebar" />
<!-- セカンダリ -->

ルート設定で outlet を定義します:

{
  path: 'chat',
  component: Chat,
  outlet: 'sidebar'
}

アウトレットのライフサイクルイベント

RouterOutlet はコンポーネントが変更されるときにイベントを発行します:

• activate: 新しいコンポーネントがインスタンス化された。
• deactivate: コンポーネントが破棄された。
• attach / detach: RouteReuseStrategy と共に使用される。

<router-outlet (activate)="onActivate($event)" />

routerOutletData によるデータの受け渡し

routerOutletData インプットを使用して、ルーティングされたコンポーネントにコンテキストデータを渡すことができます。コンポーネントはシグナルとして ROUTER_OUTLET_DATA インジェクショントークン経由でこのデータにアクセスします。

// 親コンポーネント内
<router-outlet [routerOutletData]="{ theme: 'dark' }" />

// ルーティングされたコンポーネント内
outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ theme: string }>;