Apakah perbezaan antara ViewChild dan ContentChild?

Question

Accepted Answer

Kedua-duanya mencari rujukan kepada elemen/komponen anak, tetapi melihat di **tempat berbeza**: **`@ViewChild`** menanyakan *template sendiri* komponen, sementara **`@ContentChild`** menanyakan kandungan yang **diunjur ke dalam** komponen melalui ``. ## @ViewChild — menanyakan template anda sendiri ```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` mengakses elemen/komponen yang komponen itu sendiri isytiharkan dalam templatenya — tersedia dalam **`ngAfterViewInit`**. ## @ContentChild — menanyakan kandungan yang diunjur ```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` mengakses kandungan yang **induk telah luluskan** (diunjur melalui ``) — tersedia dalam **`ngAfterContentInit`**. ## Perbezaan utama ```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) ``` ## Versi plural ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Pertanyaan signal moden ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## Mengapa ini penting Membezakan `@ViewChild` (template anda) daripada `@ContentChild` (kandungan yang diunjur) — dan masa hayat kitaran masing-masing (`ngAfterViewInit` vs `ngAfterContentInit`) — adalah penting apabila membina komponen yang boleh digunakan semula yang perlu berinteraksi dengan elemen template mereka sendiri atau kandungan yang pengguna unjur ke dalam mereka. Ini adalah titik kekeliruan biasa dan keperluan yang kerap apabila mengarang perpustakaan komponen, tab, kawalan borang, dan pembungkus yang mesti menyelaras dengan elemen anak.