ng-content 的内容投影是什么？

Question

Accepted Answer

**Content projection** 让组件能够接收和渲染**其父级传入的标记** — 通过 `` 放置。这是构建灵活、可复用的包装组件（卡片、对话框、布局）的方式，其中内部内容由使用者控制。（这是 Angular 对应的 Vue/web-component slots 和 React 的 `children`。） ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` 该卡片提供样式化包装；父级决定内部放什么内容 — 比通过 `@Input` 传递字符串灵活得多。 ## Multi-slot projection with select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` `select` 属性（一个 CSS 选择器 — 属性、类或标签）将每部分投影内容路由到正确的 `` 插槽，支持多区域布局。 ## Projected content 保持其原始上下文 ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## 为什么这很重要 Content projection 是在 Angular 中构建**可复用、可组合**UI 组件的关键 — 卡片、模态框、标签、布局以及任何「壳」组件，其中使用者提供内部内容。没有它，组件会很僵硬（只能通过 inputs 配置）；有了 ``（以及用于多个插槽的 `select`），它们就变成了灵活的容器，这对设计系统和共享组件库至关重要。