Angular组件标签内添加内容不显示的问题求助

你遇到的问题是Angular内容投影未配置导致的：当你在组件标签内部添加内容时，Angular需要在子组件（app-mat-loading-card）的模板中明确指定这些内容的渲染位置，否则父组件传入的内容会被直接忽略。

解决步骤 #

在app-mat-loading-card组件的HTML模板中添加<ng-content>标签，它会作为父组件传入内容的占位符。根据你的布局需求，将其放在合适的位置，比如child容器内：

<!Doctype HTML>
<html>
<body>
<div class="main">
  <div [ngClass]="{'parent' : loading, 'parent-no-anim': !loading}">
   <div class="child">
     <!-- 内容投影出口：父组件传入的内容会渲染到这里 -->
     <ng-content></ng-content>
   </div>
  </div>
</div>
</body>
</html>

原理说明 #

<ng-content>是Angular实现内容投影的核心指令，它会将父组件中写在<app-mat-loading-card>标签内的所有内容，渲染到子组件模板中<ng-content>所在的位置。如果子组件模板没有这个标签，Angular会直接丢弃这些传入的内容，自然无法在开发者工具中看到。

如果需要针对不同类型的内容设置多个投影区域，可以给<ng-content>添加select属性，比如：

<!-- 子组件模板 -->
<ng-content select=".button-title"></ng-content>
<ng-content select="[data-type='icon']"></ng-content>

这样父组件中对应选择器的内容会被精准渲染到指定的<ng-content>位置。

内容的提问来源于stack exchange，提问作者Cem Pamir Bana