Ni nini tofauti kati ya ViewChild na ContentChild?

Question

Accepted Answer

Zote mbili zinatafuta vielezi vya vipengele/sehemu ndogo, lakini zinaangalia mahali **tofauti**: **`@ViewChild`** inatafuta katika *kiolezo chake cha sehemu*, ilhali **`@ContentChild`** inatafuta maudhui **yaliyoonyeshwa ndani** ya sehemu kupitia ``. ## @ViewChild — tafuta kiolezo chako ```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` inakufikia vipengele/sehemu ambazo sehemu yenyewe inadhani katika kiolezo chake — inayopatikana katika **`ngAfterViewInit`**. ## @ContentChild — tafuta maudhui yaliyoonyeshwa ```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` inakufikia maudhui ambayo **mzazi alipeana** (yaliyoonyeshwa kupitia ``) — inayopatikana katika **`ngAfterContentInit`**. ## Tofauti kuu ```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) ``` ## Toleo la wingi ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Hojizo za signal za kisasa ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Kwa nini inamaanisha Kutofautiana `@ViewChild` (kiolezo chako) na `@ContentChild` (maudhui yaliyoonyeshwa) — na muda wao wa mzunguko wa maisha (`ngAfterViewInit` dhidi ya `ngAfterContentInit`) — ni muhimu wakati wa kujenga sehemu zinazoweza kutumiwa tena ambazo zinahitaji kuingiliana na vipengele vyake vya kiolezo au maudhui ambayo wanatumia wanapakua ndani yao. Ni hatua ya kawaida ya kuchanganyikiwa na haja ya kawaida wakati wa kuandaa maktaba za sehemu, kichwa, vidhibiti vya fomu, na vito ambavyo lazima viandamane na vipengele ndogo.