การฉายเนื้อหา (Content projection) กับ ng-content คืออะไร?

Question

Accepted Answer

**การฉายเนื้อหา** อนุญาตให้คอมโพเนนต์ยอมรับและแสดงผล **มาร์กอัปที่ส่งมาจากคอมโพเนนต์แม่** — วางไว้ผ่าน `` ซึ่งเป็นวิธีสร้างคอมโพเนนต์ที่ยืดหยุ่นและนำกลับมาใช้ได้ (การ์ด ไดอะล็อก เลเआวต์) ซึ่งผู้ใช้ควบคุมเนื้อหาภายใน (มันเป็นอะนาล็อกของ Angular สำหรับ slots ของ Vue/web-component และ `children` ของ React) ## การฉายเนื้อหาด้วยสล็อตเดียว ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` การ์ดให้ wrapper ที่มีสไตล์; คอมโพเนนต์แม่ตัดสินใจว่าจะใส่อะไรเข้าไป — ยืดหยุ่นมากกว่าการส่งสตริง ผ่าน `@Input` ## การฉายเนื้อหากับหลายสล็อตโดยใช้ `select` ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` แอตทริบิวต์ `select` (ตัวเลือก CSS — แอตทริบิวต์ คลาส หรือแท็ก) กำหนดเส้นทางของเนื้อหาที่ฉายเข้าสู่สล็อต `` ที่ถูกต้อง ซึ่งช่วยให้เลเอาท์พื้นที่หลายแห่งเป็นไปได้ ## เนื้อหาที่ฉายออกมาจะคงบริบทเดิมไว้ ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## เหตุใดจึงสำคัญ การฉายเนื้อหาเป็นกุญแจสำคัญในการสร้างคอมโพเนนต์ UI ที่ **นำกลับมาใช้ได้และประกอบได้** ใน Angular — การ์ด โมดอล แท็บ เลเอาท์ และ "เชลล์" ใดๆ ที่ผู้ใช้ให้เนื้อหาภายใน หากไม่มี คอมโพเนนต์จะแข็งเกร็ง (ปรับแต่งได้เฉพาะผ่านอินพุต); ด้วย `` (และ `select` สำหรับหลายสล็อต) พวกมันจึงกลายเป็นแถบที่ยืดหยุ่นได้ ซึ่งจำเป็นสำหรับระบบการออกแบบและไลบรารี่คอมโพเนนต์ที่ใช้ร่วมกัน

การฉายเนื้อหาด้วยสล็อตเดียว

การฉายเนื้อหากับหลายสล็อตโดยใช้ select

เนื้อหาที่ฉายออกมาจะคงบริบทเดิมไว้

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

การฉายเนื้อหากับหลายสล็อตโดยใช้ `select`