Angular-单击选项卡上的重新加载选项卡

Question

在我的角度组件中，我使用的标签如下：

<mat-tab-group id="tabs" >
    <mat-tab label="Tab 1"> 
        <app-first-tab-content></app-first-tab-content>
     </mat-tab>
    <mat-tab label="Tab 2" > 
        <app-second-tab-content></app-second-tab-content>
    </mat-tab>
</mat-tab-group>

单击标签标题时如何重新加载每个标签的内容？

Answer 1

我不确定我的问题是否对如果您想在单击标签时仅用新内容重新加载标签，则只需在ngOnInit组件的app-first-tab-content生命周期挂钩中编写逻辑

Answer 2

默认情况下，选项卡的内容会急切加载。急于加载的选项卡将初始化子组件，但在激活选项卡之前不会将其注入DOM。

如果要在用户单击选项卡时加载组件，请使其延迟加载，如下所示：

<mat-tab label="First">
  <ng-template matTabContent>
    // your component here
    <app-first-tab-content></app-first-tab-content>
  </ng-template>
</mat-tab>

您可以阅读有关lazyLoading here的更多信息。找到一个Stackblitz示例here。