mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-13 11:41:22 +08:00
Claude
174e31b3fc
Translated 85 skill sub-reference files to achieve full parity with the English source: - skills/angular-developer/references/ — 35 files (all references) - skills/remotion-video-creation/rules/ — 28 files (all rules) - skills/tinystruct-patterns/references/ — 5 files - skills/openclaw-persona-forge/references/ — 6 files - skills/skill-comply/prompts/ — 3 files - skills/lead-intelligence/agents/ — 4 files - skills/brand-voice/references/ — 1 file - skills/frontend-slides/ — 2 files - hooks/memory-persistence/README.md — 1 file English source parity: 0 missing files (excluding rules/zh/, internal docs, and experimental examples absent from zh-CN)
69 lines
2.4 KiB
Markdown
69 lines
2.4 KiB
Markdown
# アウトレットを使ったルートの表示
|
|
|
|
`RouterOutlet` ディレクティブは、Angularが現在のURLに対応するコンポーネントをレンダリングするためのプレースホルダーです。
|
|
|
|
## 基本的な使い方
|
|
|
|
テンプレートに `<router-outlet />` を含めます。Angularはルーティングされたコンポーネントをアウトレットの直後の兄弟要素として挿入します。
|
|
|
|
```html
|
|
<app-header /> <router-outlet />
|
|
<!-- ルートのコンテンツがここに表示される -->
|
|
<app-footer />
|
|
```
|
|
|
|
## ネストされたアウトレット
|
|
|
|
子ルートには、親コンポーネントのテンプレート内に独自の `<router-outlet />` が必要です。
|
|
|
|
```ts
|
|
// 親コンポーネントのテンプレート
|
|
<h1>Settings</h1>
|
|
<router-outlet /> <!-- ProfileやSecurityなどの子コンポーネントがここにレンダリングされる -->
|
|
```
|
|
|
|
## 名前付きアウトレット（セカンダリルート）
|
|
|
|
ページには複数のアウトレットを設定できます。アウトレットに `name` を割り当てることで、特定のアウトレットをターゲットにできます。デフォルト名は `'primary'` です。
|
|
|
|
```html
|
|
<router-outlet />
|
|
<!-- プライマリ -->
|
|
<router-outlet name="sidebar" />
|
|
<!-- セカンダリ -->
|
|
```
|
|
|
|
ルート設定で `outlet` を定義します:
|
|
|
|
```ts
|
|
{
|
|
path: 'chat',
|
|
component: Chat,
|
|
outlet: 'sidebar'
|
|
}
|
|
```
|
|
|
|
## アウトレットのライフサイクルイベント
|
|
|
|
`RouterOutlet` はコンポーネントが変更されるときにイベントを発行します:
|
|
|
|
- `activate`: 新しいコンポーネントがインスタンス化された。
|
|
- `deactivate`: コンポーネントが破棄された。
|
|
- `attach` / `detach`: `RouteReuseStrategy` と共に使用される。
|
|
|
|
```html
|
|
<router-outlet (activate)="onActivate($event)" />
|
|
```
|
|
|
|
## `routerOutletData` によるデータの受け渡し
|
|
|
|
`routerOutletData` インプットを使用して、ルーティングされたコンポーネントにコンテキストデータを渡すことができます。コンポーネントはシグナルとして `ROUTER_OUTLET_DATA` インジェクショントークン経由でこのデータにアクセスします。
|
|
|
|
```ts
|
|
// 親コンポーネント内
|
|
<router-outlet [routerOutletData]="{ theme: 'dark' }" />
|
|
|
|
// ルーティングされたコンポーネント内
|
|
outletData = inject(ROUTER_OUTLET_DATA) as Signal<{ theme: string }>;
|
|
```
|