Kakšna je razlika med ViewChild in ContentChild?

Question

IT Interview Practice · Accepted Answer

Oba vprašata za reference na podredene elemente/komponente, vendar gledal na **različnih mestih**: **`@ViewChild`** vprašuje lastno *predlogo komponente*, medtem ko **`@ContentChild`** vprašuje vsebino **projicirano v** komponento preko ``. ## @ViewChild — vprašaj svojo predlogo ```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` dostopa do elementov/komponent, ki jih komponenta sama deklarira v svoji predlogi — na voljo v **`ngAfterViewInit`**. ## @ContentChild — vprašaj projektirano vsebino ```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` dostopa do vsebine, ki jo **starš pošlje** (projicirano skozi ``) — na voljo v **`ngAfterContentInit`**. ## Ključna razlika ```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) ``` ## Množinske verzije ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Moderne signal poizvedbe ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Zakaj je to pomembno Razlikovanje med `@ViewChild` (tvoja predloga) in `@ContentChild` (projicirana vsebina) — in njihovimi časovnimi cikli (`ngAfterViewInit` proti `ngAfterContentInit`) — je bistveno pri gradnji ponovno uporabnih komponent, ki morajo komunicirati s svojimi lastnimi elementi predloge ali vsebino, ki jo potrošniki projicirajo v njih. To je pogosta točka zmede in pogosta potreba pri pisanju knjižnic komponent, zavihkov, nadzora obrazcev in oblik, ki morajo koordinirati s podredenim elementom.

@ViewChild — vprašaj svojo predlogo

@ContentChild — vprašaj projektirano vsebino

Ključna razlika

Množinske verzije

Moderne signal poizvedbe

Zakaj je to pomembno

Povezana vprašanja