单插槽内容投影
使用 ng-content 投影内容
单插槽内容投影 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
什么是内容投影
内容投影允许组件接收来自父组件的标记，并在自身模板中渲染这些标记。它相当于 Web 组件中的“插槽”。
父组件将内容写在组件标签之间，而组件决定这些内容显示在哪里。
为什么需要内容投影
卡片、对话框和面板等可复用包装器无法预先知道内容。内容投影使它们成为灵活的容器。
- 只构建一次卡片，之后可以填入任意内容
- 将布局逻辑保留在组件中
- 将内容保留在使用者一侧
ng-content 元素
<ng-content>元素标记了放置投影内容的位置。单插槽设置只使用一个不带 select 属性的 <ng-content>。
@Component({
selector: 'app-card',
template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}使用组件
父组件放在组件标签之间的所有内容，都会被投影到插槽中。
<app-card>
<h2>Hello</h2>
<p>This text is projected into the card.</p>
</app-card>单插槽 = 一个出口
对于单个未命名插槽，投影的所有节点都会进入这一个 <ng-content>。不会进行筛选，顺序会完全按照父组件中的写法保留。
默认内容
您可以在 <ng-content> 中放置备用标记。现代 Angular 仅在使用者没有向该插槽投影任何内容时，才会渲染这些默认内容。
<div class="card">
<ng-content>No content provided.</ng-content>
</div>设置投影内容的样式
投影内容属于父组件的视图，因此由父组件的样式设置，而不是由卡片组件的样式设置。若要从卡片组件访问投影节点，请谨慎使用 ::ng-deep，或依赖全局样式。
内容与视图
Angular 区分内容子项（投影进来的内容）和视图子项（在模板中声明的内容）。这会影响 contentChild 与 viewChild 等查询。
icon = contentChild(IconComponent);生命周期：ngAfterContentInit
投影内容会在 ngAfterContentInit() 运行后可用。请使用它（或 ngAfterContentChecked）安全地读取内容子项。
ngAfterContentInit() {
console.log('Projected content ready');
}一个真实的面板示例
下面是一个完整的可复用面板。使用者完全控制内部内容，而面板控制外壳。
@Component({
selector: 'app-panel',
template: '<section class="panel"><ng-content></ng-content></section>',
styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}常见错误
两次放置相同的未命名 <ng-content> 并不会复制内容。Angular 只会将内容投影到最后一个匹配的插槽中。如果需要多个区域，请使用多插槽投影。
快速检查
测试您对单插槽投影的理解。
回顾
您已学习到，内容投影使用 <ng-content> 将父组件提供的标记渲染到组件内部。单插槽投影使用一个未命名出口，投影内容属于父组件视图，并会在 ngAfterContentInit 中可用。
常见问题解答
「单插槽内容投影」课时是免费的吗？
是的 — 「单插槽内容投影」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「单插槽内容投影」这节课中我会学到什么？
使用 ng-content 投影内容 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「单插槽内容投影」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。