Vad är skillnaden mellan ViewChild och ContentChild?

Question

Accepted Answer

Båda frågar efter referenser till underordnade element/komponenter, men de söker på **olika ställen**: **`@ViewChild`** frågar komponentens *egen mall*, medan **`@ContentChild`** frågar innehål **projicerat in i** komponenten via ``. ## @ViewChild — fråga din egen mall ```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` kommer åt element/komponenter som komponenten själv deklarerar i sin mall — tillgänglig i **`ngAfterViewInit`**. ## @ContentChild — fråga projicerat innehål ```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` kommer åt innehål som **föräldern skickade in** (projicerat genom ``) — tillgänglig i **`ngAfterContentInit`**. ## Huvudskillnaden ```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) ``` ## Plural-versioner ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Moderna signal-frågor ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Varför det är viktigt Att skilja mellan `@ViewChild` (din mall) och `@ContentChild` (projicerat innehål) — och deras respektive livscykeltidpunkter (`ngAfterViewInit` kontra `ngAfterContentInit`) — är väsentligt när man bygger återanvändbara komponenter som behöver interagera med antingen sina egna mallelement eller innehål som konsumenter projicerar in i dem. Det är en vanlig förvirringspoint och ett återkommande behov när man skapar komponentbibliotek, flikar, formulärkontroller och omslag som måste samordna med underordnade element.