如何在Angular 19中创建类似MatCard的子组件？该模板叫什么？

你提到的这种Angular组件结构，核心是内容投影（Content Projection），更具体的是多槽内容投影——父组件（比如mat-card）内部定义了多个指定的"插槽"，允许使用者在父组件标签内嵌套不同的子组件或内容，父组件会把这些内容投射到对应的位置渲染。

比如Material的mat-card就是通过多个带select属性的<ng-content>实现的，你自己写自定义组件时可以参考这个逻辑：

<!-- 自定义card组件的模板示例 -->
<div class="card-container" [class.outlined]="appearance === 'outlined'">
  <!-- 匹配<app-card-header>的内容 -->
  <ng-content select="app-card-header"></ng-content>
  
  <!-- 匹配<app-card-content>的内容 -->
  <ng-content select="app-card-content"></ng-content>
  
  <!-- 匹配<app-card-actions>的内容 -->
  <ng-content select="app-card-actions"></ng-content>
</div>

你要找参考示例的话，直接搜Angular的"多槽内容投影"或者"multi-slot content projection"，就能找到官方实现和社区案例，核心就是用ng-content的select属性区分不同投影区域，实现这种结构化的组件。

内容的提问来源于stack exchange，提问作者parascus