Angular 中实现内容投影：让子元素在自定义组件内正确显示

angular 组件默认会忽略标签内部的内容，需通过 `` 实现内容投影，才能将父组件中嵌套的 html（如 span、按钮等）渲染到子组件模板的指定位置。

要在 Angular 自定义组件中支持“插槽式”内容插入（即类似 app-mat-loading-card>... 内部传入任意 HTML），必须显式启用内容投影（Content Projection） —— 这是 Angular 提供的标准机制，核心在于使用 元素作为内容占位符。

✅ 正确实现步骤

1. 在子组件模板（mat-loading-card.component.html）中添加
   将其放置在你希望外部内容渲染的位置。例如：

2. 确保组件无 encapsulation: ViewEncapsulation.ShadowDom 干扰（默认 Emulated 即可）
   若使用 Shadow DOM，需额外注意样式穿透，但对内容投影本身无影响。

3. 父组件中按需使用（支持任意结构）
   现在以下写法将正常生效：

     {{ device.deviceName }}
     Select
     @@##@@
   

   浏览器中将真实渲染为：

     
        
         
           My Router
           Select
           @@##@@
         
       
     
   

⚠️ 注意事项

• 是编译时静态投影，不支持条件渲染（如 *ngIf 包裹 无效）；如需动态控制，应改用 @Input() 或 ng-template + ngTemplateOutlet。
• 支持多插槽投影：通过 select 属性实现（如 ），配合 ... 使用。
• 投影内容的样式作用域仍受父组件影响（因未进入 Shadow DOM），建议通过 ::ng-deep（已弃用，推荐 :host ::ng-deep 或 CSS 类隔离）或全局样式谨慎处理。

✅ 总结

内容投影不是“自动生效”的特性，而是需要开发者主动在子组件模板中声明 才能启用。它是构建可复用、高内聚 UI 组件（如卡片、模态框、布局容器）的关键能力——既保持封装性，又提供灵活的内容定制入口。