Content projection với ng-content là gì?

Question

Accepted Answer

**Content projection** cho phép một component nhận và render **markup được truyền vào bởi cha của nó** — được đặt qua ``. Đó là cách bạn xây dựng các component bao bọc (wrapper) linh hoạt, tái sử dụng (card, dialog, layout) mà người tiêu dùng kiểm soát nội dung bên trong. (Đây là tương đương trong Angular của slot của Vue/web-component và `children` của React.) ## Projection một slot ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Card cung cấp lớp bọc đã được style; cha quyết định cái gì nằm bên trong — linh hoạt hơn nhiều so với truyền chuỗi qua `@Input`. ## Projection nhiều slot với select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Thuộc tính `select` (một CSS selector — thuộc tính, class, hoặc thẻ) định tuyến mỗi mảnh nội dung được chiếu tới đúng slot ``, cho phép các layout đa vùng. ## Nội dung được chiếu giữ ngữ cảnh gốc của nó ```text Nội dung được chiếu được tạo trong ngữ cảnh của CHA — các binding, phương thức, và vòng đời của nó thuộc về cha, không phải component bao bọc. ``` ## Tại sao điều này quan trọng Content projection là chìa khóa để xây dựng các component UI **tái sử dụng, kết hợp được** trong Angular — card, modal, tab, layout, và bất kỳ "vỏ" nào mà người tiêu dùng cung cấp nội dung bên trong. Không có nó, các component sẽ cứng nhắc (chỉ cấu hình được qua input); với `` (và `select` cho nhiều slot), chúng trở thành các container linh hoạt, điều này thiết yếu cho design system và các thư viện component dùng chung.