angular - 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>

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

标签： angular

Answer 1

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

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

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

您可以在此处阅读有关延迟加载的更多信息。在此处查找 Stackblitz 示例。