Mikä on ero ViewChildin ja ContentChildin välillä?

Question

Accepted Answer

Molemmat hakevat viittauksia lapsielementteihin/komponentteihin, mutta etsivät **eri paikoista**: **`@ViewChild`** hakee komponentin *omasta mallinteesta*, kun taas **`@ContentChild`** hakee komponenttiin **projisoidun** sisällön `` kautta. ## @ViewChild — hae omasta mallinteestasi ```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` käyttää elementtejä/komponentteja, jotka komponentti itse julistaa mallinteeseensa — saatavilla **`ngAfterViewInit`** kohdassa. ## @ContentChild — hae projisoidusta sisällöstä ```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` käyttää sisältöä, jonka **vanhempi komponentti välitti** (projisoidaan `` kautta) — saatavilla **`ngAfterContentInit`** kohdassa. ## Keskeinen ero ```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) ``` ## Monikkoversiot ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Modernit signaalikyselyn ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Miksi sillä on merkitystä `@ViewChild` (sinun mallinteesi) ja `@ContentChild` (projisoidun sisällön) erottaminen — ja niiden vastaavat elinkaaren ajoitukset (`ngAfterViewInit` vs `ngAfterContentInit`) — on olennaista rakennettaessa uudelleenkäytettäviä komponentteja, joiden on oltava vuorovaikutuksessa joko niiden omien mallinteiden elementtien kanssa tai sisällön kanssa, jonka kuluttajat projisioivat niihin. Se on yleinen sekaannus ja tavallinen tarve komponenttikirjastojen, välilehdet, lomakenohjauskomentojen ja wrapper-koodien kirjoittamisessa, joiden täytyy koordinoida lapsielementtien kanssa.