ความแตกต่างระหว่าง ViewChild และ ContentChild คืออะไร?

Question

IT Interview Practice · Accepted Answer

ทั้งสองค้นหาการอ้างอิงถึงองค์ประกอบ/ส่วนประกอบลูก แต่จะค้นหาใน **สถานที่ต่างกัน**: **`@ViewChild`** ค้นหาใน *template ของตัวเอง* ของส่วนประกอบ ในขณะที่ **`@ContentChild`** ค้นหาเนื้อหา **ที่ฉายเข้าไป** ในส่วนประกอบผ่าน `` ## @ViewChild — ค้นหา template ของคุณเอง ```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` เข้าถึงองค์ประกอบ/ส่วนประกอบที่ส่วนประกอบนั้นประกาศในแม่แบบของมัน — พร้อมใช้งานใน **`ngAfterViewInit`** ## @ContentChild — ค้นหาเนื้อหาที่ฉายออกมา ```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` เข้าถึงเนื้อหาที่ **parent ส่งเข้าไป** (ฉายผ่าน ``) — พร้อมใช้งานใน **`ngAfterContentInit`** ## ความแตกต่างที่สำคัญ ```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) ``` ## เวอร์ชันพหูพจน์ ```ts @ViewChildren(ItemComponent) items!: QueryList; // all matching items ngAfterViewInit() { this.items.forEach(i => ...); this.items.changes.subscribe(...); } ``` ## การค้นหา signal สมัยใหม่ ```ts input = viewChild("nameInput"); // signal-based query (newer Angular) ``` ## เหตุใดจึงสำคัญ การแยกแยะ `@ViewChild` (template ของคุณ) จาก `@ContentChild` (เนื้อหาที่ฉายออกมา) — และเวลาวงจรชีวิตที่เกี่ยวข้อง (`ngAfterViewInit` เทียบกับ `ngAfterContentInit`) — เป็นสิ่งจำเป็นเมื่อสร้างส่วนประกอบที่นำมาใช้ซ้ำได้ซึ่งจำเป็นต้องโต้ตอบกับองค์ประกอบ template ของตัวเอง หรือเนื้อหาที่ผู้ใช้ฉายเข้าไปในพวกเขา เป็นจุดสับสนทั่วไปและความต้องการที่บ่อยครั้งเมื่อเขียนไลบรารี่องค์ประกอบ แท็บ การควบคุมแบบฟอร์ม และวัสดุห่อหุ้มที่จำเป็นต้องประสานกับองค์ประกอบลูก

@ViewChild — ค้นหา template ของคุณเอง

@ContentChild — ค้นหาเนื้อหาที่ฉายออกมา

ความแตกต่างที่สำคัญ

เวอร์ชันพหูพจน์

การค้นหา signal สมัยใหม่

เหตุใดจึงสำคัญ

คำถามที่เกี่ยวข้อง