mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-14 12:11:27 +08:00
feat(ja-JP): add skill sub-reference translations (angular, remotion, etc.)
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)
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
# アウトレットを使ったルートの表示
|
||||
|
||||
`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 }>;
|
||||
```
|
||||
Reference in New Issue
Block a user