angular 组件默认会忽略标签内部的内容，需通过 `
要在 Angular 自定义组件中支持“插槽式”内容插入（即类似 app-mat-loading-card>... 内部传入任意 HTML），必须显式启用内容投影（Content Projection） —— 这是 Angular 提供的标准机制，核心在于使用
✅ 正确实现步骤
-
在子组件模板（mat-loading-card.component.html）中添加
将其放置在你希望外部内容渲染的位置。例如： 确保组件无 encapsulation: ViewEncapsulation.ShadowDom 干扰（默认 Emulated 即可）
若使用 Shadow DOM，需额外注意样式穿透，但对内容投影本身无影响。-
父组件中按需使用（支持任意结构）
现在以下写法将正常生效：@@##@@ 浏览器中将真实渲染为：
@@##@@
⚠️ 注意事项
是编译时静态投影，不支持条件渲染（如 *ngIf 包裹 无效）；如需动态控制，应改用 @Input() 或 ng-template + ngTemplateOutlet。 - 支持多插槽投影：通过 select 属性实现（如
），配合 ...使用。 - 投影内容的样式作用域仍受父组件影响（因未进入 Shadow DOM），建议通过 ::ng-deep（已弃用，推荐 :host ::ng-deep 或 CSS 类隔离）或全局样式谨慎处理。
✅ 总结
内容投影不是“自动生效”的特性，而是需要开发者主动在子组件模板中声明
