Menene bambanci tsakanin ViewChild da ContentChild?

Question

Accepted Answer

Dukansu suna neman tunani ga abubuwan/abuyuwan jiya, amma suna kallon **wurare daban-daban**: **`@ViewChild`** yana neman *jigon rukunin kansa**, daidai **`@ContentChild`** yana neman wajen da **aka bugi a ciki** na rukunin ta hanyar ``. ## @ViewChild — nema jigon kanka ```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` yana iya zuwa wajen/abuyuwan da rukunin kansa kakayi a cikin jigonsa — ana samu a cikin **`ngAfterViewInit`**. ## @ContentChild — nema abun da aka bugi ```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` yana iya zuwa abun da **ukin ya aika a ciki** (aka bugi ta ``) — ana samu a cikin **`ngAfterContentInit`**. ## Ainihin bambanci ```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) ``` ## Juna-fududin ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Tambayoyin alamar jiya ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Me ya sa haka mahimmanci Raba `@ViewChild` (jigon kanka) da `@ContentChild` (abun da aka bugi) — da lokaci-lokacin jigon ƙaddara (`ngAfterViewInit` da `ngAfterContentInit`) — shine na mahalaci lokacin kamatawa rukunin da za a sake amfani da su wajen da suka bugi mu abuyuwan kansu ko kuma abin da masu amfani suke bugi a cikinta. Gida abu ne na jahannama da mahimmaci a lokacin kamatawa filin rukunin, karufi, juyawa abubuwan jiyan, da ruguje wajen da dole ne mu haɗa da abuyuwan jiya.