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

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

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

<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>
stack overflow load the angular component on click using mat tab
原文答案
author avatar

接受的答案

你应该使用 <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>

答案:

作者头像

来自 documentation

可以通过在带有 ng-template 属性的 matTabContent 中声明正文来延迟加载选项卡内容。

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