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

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

✅ 正确实现步骤

1. 修改 mat-loading-card.component.html
   在你希望外部内容插入的位置（例如 .child 容器内），加入 ：

<div class="main">
  <div [ngClass]="{'parent': loading, 'parent-no-anim': !loading}">
    <div class="child">
      <ng-content></ng-content>
    </div>
  </div>
</div>

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

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

<app-mat-loading-card [loading]="device.loading || device.connecting">
  <span class="button-title">{{ device.deviceName }}</span>
  <button (click)="onAction()">Configure</button>
</app-mat-loading-card>

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

<div class="main">
  <div class="parent-no-anim">
    <div class="child">
      <span class="button-title">Router-01</span>
      <button>Configure</button>
    </div>
  </div>
</div>

⚠️ 注意事项

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

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

  

  htmlppt.skill

  把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

  下载

  <!-- 子组件模板 -->
  <header><ng-content select="[slot='header']"></ng-content></header>
  <main><ng-content select="[slot='body']"></ng-content></main>

  对应调用：

  <app-mat-loading-card [loading]="true">
    <div slot="header"><h3>Loading Device</h3></div>
    <div slot="body"><span>{{ device.deviceName }}</span></div>
  </app-mat-loading-card>

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

✅ 总结

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