Hva er forskjellen mellom ViewChild og ContentChild?

Question

Accepted Answer

Begge søker etter referanser til underordnede elementer/komponenter, men de ser **på forskjellige steder**: **`@ViewChild`** søker i komponenten sin *egen template*, mens **`@ContentChild`** søker etter innhold som er **projisert inn i** komponenten via ``. ## @ViewChild — søk i din egen template ```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` får tilgang til elementer/komponenter som komponenten selv deklarerer i sin template — tilgjengelig i **`ngAfterViewInit`**. ## @ContentChild — søk i projisert innhold ```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` får tilgang til innhold som **forelderen har sendt inn** (projisert gjennom ``) — tilgjengelig i **`ngAfterContentInit`**. ## Nøkkelskilnaden ```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) ``` ## Flertallsversioner ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Moderne signal-spørringer ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Hvorfor det er viktig Å skille mellom `@ViewChild` (din template) og `@ContentChild` (projisert innhold) — og deres respektive lifecycle-timing (`ngAfterViewInit` vs `ngAfterContentInit`) — er essensielt når du bygger gjenbrukbare komponenter som må samhandle med enten sine egne template-elementer eller innholdet som forbrukere projiserer inn i dem. Det er et vanlig forvirringspunkt og et hyppig behov når du skriver komponentbiblioteker, faner, skjemakontroller og wrappere som må koordinere med underordnede elementer.