Jaký je rozdíl mezi ViewChild a ContentChild?

Question

Accepted Answer

Oba dotazují na odkazy na podřízené prvky/komponenty, ale hledají na **různých místech**: **`@ViewChild`** dotazuje *vlastní šablonu komponenty*, zatímco **`@ContentChild`** dotazuje obsah **promítnutý do** komponenty přes ``. ## @ViewChild — dotazujte svou vlastní šablonu ```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` přistupuje k prvkům/komponentám, které komponenta sama deklaruje v její šabloně — dostupné v **`ngAfterViewInit`**. ## @ContentChild — dotazujte promítnutý obsah ```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` přistupuje k obsahu, který **rodič předal** (promítnutý přes ``) — dostupný v **`ngAfterContentInit`**. ## Klíčový rozdíl ```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) ``` ## Plurálne verze ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Moderní signálové dotazy ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Proč na tom záleží Rozeznání `@ViewChild` (vaší šablony) od `@ContentChild` (promítnutého obsahu) — a jejich příslušné časování životního cyklu (`ngAfterViewInit` vs `ngAfterContentInit`) — je nezbytné při vytváření znovupoužitelných komponent, které musí interagovat s prvky své vlastní šablony nebo s obsahem, který do nich konzumenti promítají. Jde o běžný zdroj zmatenosti a频tou potřebu při vytváření knihoven komponent, karet, ovládacích prvků formuláře a obalů, které musí koordinovat s podřízenými prvky.