如何配置mat-tab标签页仅点击时才显示对应内容？

mat-tab-group默认会在页面初始化阶段渲染所有标签页的内部内容，要实现仅点击对应标签时才加载渲染内容，直接使用官方原生提供的matTabContent指令包裹标签内容即可，无需额外引入第三方依赖或复杂逻辑。

修正后的实现代码 #

<mat-tab-group mat-align-tabs="start">
  <mat-tab label="First">
    <!-- 懒加载内容包裹在带matTabContent指令的ng-template中 -->
    <ng-template matTabContent>
      Content 1
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      Content 2
    </ng-template>
  </mat-tab>
  <mat-tab label="Third">
    <ng-template matTabContent>
      Content 3
    </ng-template>
  </mat-tab>
</mat-tab-group>

配置说明 #

• 被<ng-template matTabContent>包裹的内容，只会在对应标签被用户首次点击激活时才会初始化渲染、触发内部组件的生命周期钩子，未激活的标签不会提前加载任何内容
• 默认配置下，标签首次加载后会缓存已渲染的内容，后续切换回该标签不会重复执行初始化逻辑；如果需要每次切换到标签都重新加载内容，给<mat-tab-group>添加[preserveContent]="false"属性即可
• 注意区分指令用途：matTabContent用于控制标签体懒加载，matTabLabel用于自定义标签头部的展示内容，不要混用

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