Sự khác biệt giữa ViewChild và ContentChild là gì?

Question

Accepted Answer

Cả hai đều truy vấn các tham chiếu tới các phần tử/component con, nhưng chúng tìm ở **những nơi khác nhau**: **`@ViewChild`** truy vấn *template của riêng* component, còn **`@ContentChild`** truy vấn nội dung được **chiếu vào** component qua ``. ## @ViewChild — truy vấn template của chính bạn ```ts @Component({ template: ` `, }) export class ParentComponent implements AfterViewInit { @ViewChild("nameInput") input!: ElementRef; // theo template ref @ViewChild(ChildComponent) child!: ChildComponent; // theo kiểu component ngAfterViewInit() { this.input.nativeElement.focus(); // có sẵn sau khi VIEW khởi tạo this.child.doSomething(); // gọi phương thức của một component con } } ``` `@ViewChild` truy cập các phần tử/component mà chính component đó khai báo trong template của nó — có sẵn trong **`ngAfterViewInit`**. ## @ContentChild — truy vấn nội dung được chiếu ```ts @Component({ selector: "app-card", template: `

`, // nội dung được chiếu vào đây }) export class CardComponent implements AfterContentInit { @ContentChild(CardTitleComponent) title!: CardTitleComponent; ngAfterContentInit() { // nội dung được chiếu đã sẵn sàng ở đây (SỚM HƠN ngAfterViewInit) console.log(this.title); } } ``` ```html

Hello

``` `@ContentChild` truy cập nội dung mà **cha đã truyền vào** (được chiếu qua ``) — có sẵn trong **`ngAfterContentInit`**. ## Sự phân biệt then chốt ```text @ViewChild → các phần tử trong template của RIÊNG component này → ngAfterViewInit @ContentChild → các phần tử ĐƯỢC CHIẾU vào từ cha → ngAfterContentInit (số nhiều: @ViewChildren / @ContentChildren trả về một QueryList của tất cả các kết quả khớp) ``` ## Phiên bản số nhiều ```ts @ViewChildren(ItemComponent) items!: QueryList; // tất cả các item khớp ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## Signal query hiện đại ```ts input = viewChild("nameInput"); // query dựa trên signal (Angular mới hơn) ``` ## Tại sao điều này quan trọng Phân biệt `@ViewChild` (template của bạn) với `@ContentChild` (nội dung được chiếu) — và thời điểm vòng đời tương ứng của chúng (`ngAfterViewInit` so với `ngAfterContentInit`) — là thiết yếu khi xây dựng các component tái sử dụng cần tương tác với hoặc các phần tử template của riêng chúng hoặc nội dung mà người tiêu dùng chiếu vào. Đây là một điểm nhầm lẫn phổ biến và một nhu cầu thường gặp khi viết các thư viện component, tab, form control, và wrapper phải phối hợp với các phần tử con.