使用 mat 选项卡在单击时加载角度分量答案

【问题标题】：load the angular component on click using mat tab使用 mat 选项卡在单击时加载角度分量
【发布时间】：2021-05-26 19:33:52
【问题描述】：

我正在为我的标签使用角度和材质，下面是我的标签代码。

现在它正在一次加载所有三个选项卡。但我只需要在点击时加载这个组件。我看到我们可以选择捕获点击事件。但我不知道在点击选项卡时加载组件。请帮我在点击时加载组件

<mat-tab-group>
  <mat-tab label="Region"> 
    <app-region><app-region>
  </mat-tab>
  <mat-tab label="Country"> 
    <app-country><app-country>
  </mat-tab>
  <mat-tab label="State"> 
  <app-state><app-state>
  
  </mat-tab>
</mat-tab-group>

【问题讨论】：

标签： angular angular-material

【解决方案1】：

来自documentation：

标签内容可以通过在 ng-template 中使用 matTabContent 属性声明正文来延迟加载。

<mat-tab label="First">
  <ng-template matTabContent>
    Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
  </ng-template>
</mat-tab>

【讨论】：

【解决方案2】：

你应该使用<ng-template matTabContent>:

<mat-tab-group>
  <mat-tab label="Region">
    <ng-template matTabContent>
      <app-region><app-region>
    </ng-template>
  </mat-tab>
  <mat-tab label="Country">
    <ng-template matTabContent>
      <app-country><app-country>
    </ng-template>
  </mat-tab>
  <mat-tab label="State">
    <ng-template matTabContent>
      <app-state><app-state>
    </ng-template>
  </mat-tab>
</mat-tab-group>

【讨论】：