mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-11 10:43:10 +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,80 @@
|
||||
# コンポーネントのホスト要素
|
||||
|
||||
**ホスト要素**とは、コンポーネントのセレクターに一致するDOM要素です。コンポーネントのテンプレートはこの要素の内部にレンダリングされます。
|
||||
|
||||
## ホスト要素へのバインディング
|
||||
|
||||
`@Component` デコレーターの `host` プロパティを使用して、プロパティ、属性、スタイル、イベントをホスト要素にバインドします。これはレガシーデコレーターより**推奨されるアプローチ**です。
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'custom-slider',
|
||||
host: {
|
||||
'role': 'slider', // 静的属性
|
||||
'[attr.aria-valuenow]': 'value', // 属性バインディング
|
||||
'[class.active]': 'isActive()', // クラスバインディング
|
||||
'[style.color]': 'color()', // スタイルバインディング
|
||||
'[tabIndex]': 'disabled ? -1 : 0', // プロパティバインディング
|
||||
'(keydown)': 'onKeyDown($event)', // イベントバインディング
|
||||
},
|
||||
})
|
||||
export class CustomSlider {
|
||||
value = 0;
|
||||
disabled = false;
|
||||
isActive = signal(false);
|
||||
color = signal('blue');
|
||||
|
||||
onKeyDown(event: KeyboardEvent) {
|
||||
/* ... */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## レガシーデコレーター
|
||||
|
||||
`@HostBinding` と `@HostListener` は後方互換性のためにサポートされていますが、新しいコードでは使用を避けてください。
|
||||
|
||||
```ts
|
||||
export class CustomSlider {
|
||||
@HostBinding('tabIndex')
|
||||
get tabIndex() {
|
||||
return this.disabled ? -1 : 0;
|
||||
}
|
||||
|
||||
@HostListener('keydown', ['$event'])
|
||||
onKeyDown(event: KeyboardEvent) {
|
||||
/* ... */
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## バインディングの競合
|
||||
|
||||
コンポーネント(ホストバインディング)とコンシューマー(テンプレートバインディング)の両方が同じプロパティにバインドする場合:
|
||||
|
||||
1. **静的 vs 静的**: インスタンス(コンシューマー)のバインディングが優先されます。
|
||||
2. **静的 vs 動的**: 動的バインディングが優先されます。
|
||||
3. **動的 vs 動的**: コンポーネントのホストバインディングが優先されます。
|
||||
|
||||
## ホスト属性のインジェクト
|
||||
|
||||
`inject` 関数と `HostAttributeToken` を使用して、構築時にホスト要素から静的属性を読み取ります。
|
||||
|
||||
```ts
|
||||
import {Component, HostAttributeToken, inject} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-btn',
|
||||
template: `<ng-content />`,
|
||||
})
|
||||
export class AppButton {
|
||||
// `{ optional: true }` でインジェクトしない限り、'type'がない場合エラーをスローします
|
||||
type = inject(new HostAttributeToken('type'));
|
||||
}
|
||||
```
|
||||
|
||||
使用例:
|
||||
|
||||
```html
|
||||
<app-btn type="primary">Click Me</app-btn>
|
||||
```
|
||||
Reference in New Issue
Block a user