Jaka jest różnica między ViewChild a ContentChild?

Question

Accepted Answer

Zarówno `@ViewChild` jak i `@ContentChild` wyszukują referencje do elementów/komponentów podrzędnych, ale patrzą na **różnych miejscach**: **`@ViewChild`** wyszukuje w *własnym szablonie* komponentu, podczas gdy **`@ContentChild`** wyszukuje zawartość **rzutowaną do** komponentu za pośrednictwem ``. ## @ViewChild — wyszukiwanie we własnym szablonie ```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` uzyskuje dostęp do elementów/komponentów, które komponent sam deklaruje w swoim szablonie — dostępne w **`ngAfterViewInit`**. ## @ContentChild — wyszukiwanie w rzutowanej zawartości ```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` uzyskuje dostęp do zawartości, którą **rodzic przekazał** (rzutowanej przez ``) — dostępne w **`ngAfterContentInit`**. ## Kluczowe rozróżnienie ```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) ``` ## Dlaczego to ważne Rozdystyngowanie między `@ViewChild` (Twój szablon) a `@ContentChild` (rzutowana zawartość) — oraz ich odpowiednich czasów cyklu życia (`ngAfterViewInit` vs `ngAfterContentInit`) — jest niezbędne podczas budowania komponentów wielokrotnego użytku, które muszą współdziałać z ich własnymi elementami szablonu lub zawartością, którą konsumenci do nich rzutują. To jest częsty punkt zamieszania i częsta potrzeba podczas pisania bibliotek komponentów, kart, kontrolek formularzy i opakowań, które muszą koordynować się z elementami podrzędnymi. ## Wersje mnoga ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Nowoczesne zapytania sygnałów ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ```