Was ist der Unterschied zwischen ViewChild und ContentChild?

Question

Accepted Answer

Beide fragen Referenzen zu untergeordneten Elementen/Komponenten ab, suchen aber an **verschiedenen Orten**: **`@ViewChild`** fragt das *eigene Template der Komponente* ab, während **`@ContentChild`** den in die Komponente **projizierten** Inhalt über `` abfragt. ## @ViewChild — dein eigenes Template abfragen ```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` greift auf Elemente/Komponenten zu, die die Komponente selbst in ihrem Template deklariert — verfügbar in **`ngAfterViewInit`**. ## @ContentChild — projizierten Inhalt abfragen ```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` greift auf Inhalt zu, den **die Parent-Komponente übergeben hat** (durch `` projiziert) — verfügbar in **`ngAfterContentInit`**. ## Der Schlüsselunterschied ```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) ``` ## Pluralversionen ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Moderne Signal-Abfragen ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Warum es wichtig ist Die Unterscheidung zwischen `@ViewChild` (dein Template) und `@ContentChild` (projizierter Inhalt) — und ihre jeweiligen Lifecycle-Timings (`ngAfterViewInit` vs `ngAfterContentInit`) — ist entscheidend beim Erstellen wiederverwendbarer Komponenten, die mit ihren eigenen Template-Elementen oder dem Inhalt interagieren müssen, den Consumer in sie projizieren. Es ist ein häufiger Verwirrungspunkt und ein regelmäßiges Anliegen beim Erstellen von Komponentenbibliotheken, Registern, Formularsteuerelementen und Wrappern, die sich mit untergeordneten Elementen abstimmen müssen.