Angular 中使用 ng-content 实现内容投影的完整教程

在 angular 中，组件标签内嵌套的内容默认不会渲染，需通过 `` 指令显式声明插槽位置，才能将父组件传入的 html 内容（如 span、按钮等）动态插入到子组件模板中。这是实现可复用、灵活 ui 组件的核心机制。

要让 app-mat-loading-card> 支持接收并显示内部内容（例如 {{device.deviceName}}），你需要在 mat-loading-card 组件的模板中添加 占位符。

✅ 正确实现步骤

1. 修改 mat-loading-card.component.html
   在你希望外部内容插入的位置（例

   

   如 .child 容器内），加入 ：

? 不是 Angular 组件或指令，而是一个编译时投影插槽——它不会出现在最终 DOM 中，仅作为内容“中转站”，将父组件模板中写在 ... 标签之间的内容，原样渲染到此处。

2. 父组件中即可正常使用内容投影
   现在以下写法将正常生效：

  {{ device.deviceName }}
  Configure

渲染结果（当 loading = false 时）将类似：

  
    
      Router-01
      Configure
    
  

⚠️ 注意事项

• 不支持绑定事件或输入属性：它只做静态结构投影，无法直接监听子内容中的 (click)；如需交互，应通过 @Output() 或服务通信。

• 可使用多插槽投影（带 select 属性）实现更精细控制，例如：

  对应调用：

    
  Loading Device
    {{ device.deviceName }}
  

• 投影内容的样式作用域仍受父组件影响（除非启用 ViewEncapsulation.ShadowDom），建议在子组件中为 包裹容器设置明确类名（如 .child），便于统一控制布局与间距。

✅ 总结

Angular 的内容投影不是“自动继承”，而是“显式接纳”——没有 ，所有嵌套内容都会被忽略。掌握 ng-content 是构建高复用 UI 组件（如卡片、模态框、标签页）的必备技能。它让组件既保持封装性，又具备表现力与组合性，真正践行了“关注点分离”与“开放封闭”原则。