Koja je razlika između ViewChild i ContentChild?

Question

Accepted Answer

Oboje pretražuju reference na podređene elemente/komponente, ali gledaju na **različitim mjestima**: **`@ViewChild`** pretražuje *vlastivi template* komponente, dok **`@ContentChild`** pretražuje sadržaj **projiciran u** komponentu kroz ``. ## @ViewChild — pretražite vlastiti 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` pristupa elementima/komponentama koje sama komponenta deklarira u svom template-u — dostupno u **`ngAfterViewInit`**. ## @ContentChild — pretražite projicirani sadržaj ```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` pristupa sadržaju koji je **roditelj prosljeđivao** (projiciran kroz ``) — dostupno u **`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) ``` ## Verzije u množini ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Moderni signal upiti ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Zašto je važno Razlikovanje `@ViewChild` (vaš template) od `@ContentChild` (projicirani sadržaj) — i njihovim odgovarajućim vremenima životnog ciklusa (`ngAfterViewInit` vs `ngAfterContentInit`) — essencijalno je pri izgradnji ponovno iskoristivih komponenti koje trebaju stupiti u interakciju sa bilo vlastitim template elementima ili sadržajem koji konzumenti projiciraju u njih. To je česta točka zbunjenosti i česta potreba pri izradi biblioteka komponenti, tabova, kontrola obrazaca i wrappera koji se moraju koordinirati s podređenim elementima.