ViewChildとContentChildの違いは何ですか？

Question

Accepted Answer

どちらも子要素/コンポーネントへの参照を検索しますが、**異なる場所を見ます**：**`@ViewChild`**はコンポーネント自身の*テンプレート*をクエリし、一方**`@ContentChild`**は``を介してコンポーネント**に投影されたコンテンツ**をクエリします。 ## @ViewChild — 自分のテンプレートをクエリ ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // by template ref @ViewChild(ChildComponent) child!: ChildComponent; // by component type ngAfterViewInit() { this.input.nativeElement.focus(); // available after the VIEW initializes this.child.doSomething(); // call a child component's method } } ``` `@ViewChild`はコンポーネント自身がテンプレートに宣言した要素/コンポーネントにアクセスします — **`ngAfterViewInit`**で利用可能です。 ## @ContentChild — 投影されたコンテンツをクエリ ```ts @Component({ selector: "app-card", template: `

`, // content projected here }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // the projected content is ready here (EARLIER than ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild`は**親が渡したコンテンツ**（``を通じて投影されたもの）にアクセスします — **`ngAfterContentInit`**で利用可能です。 ## 重要な区別 ```text @ViewChild → elements in THIS component's own template → ngAfterViewInit @ContentChild → elements PROJECTED in from the parent → ngAfterContentInit (plural: @ViewChildren / @ContentChildren return a QueryList of all matches) ``` ## 複数形版 ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## 最新のシグナルクエリ ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## なぜ重要なのか `@ViewChild`（自分のテンプレート）と`@ContentChild`（投影されたコンテンツ）を区別すること — および各々のライフサイクルタイミング（`ngAfterViewInit` vs `ngAfterContentInit`） — は、自分のテンプレート要素またはコンシューマが投影するコンテンツのいずれかと相互作用する必要があるような再利用可能なコンポーネントを構築する際に不可欠です。これはコンポーネントライブラリ、タブ、フォームコントロール、および子要素と調整する必要があるラッパーを作成する際の、混乱の一般的なポイントであり、頻繁に必要とされます。