选项卡上的Angular 4 Material Tabs Load

Question

是否可以在Angular Material选项卡上实现延迟加载？否则,我需要一种方法来输入选项卡时运行方法.

Answer 1

我知道问题是关于 angular-material 5.xx，但对于那些到达这里并且没有注意的人来说，angular-material 6 本身支持延迟加载选项卡内容https://material.angular.io/components/tabs /overview#lazy-loading。

Answer 2

您可以使用selectChange提供的事件<md-tab-group>。更改选项卡选择时触发。从文档中：

@Output（）selectChange：选项卡选择更改时发出的事件。

在您的模板中：

<md-tab-group (selectChange)="tabSelectionChanged($event)">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">
    This tab will load some morecontents after 5 seconds.
    <p>{{ moreContents }}</p>
  </md-tab>
</md-tab-group>

...并在您的打字稿代码中：

tabSelectionChanged(event){
    // Get the selected tab
    let selectedTab = event.tab;
    console.log(selectedTab);

    // Call some method that you want 
    this.someMethod();
}

链接到工作演示。

Answer 3

根据Angular 材料文档：

延迟加载

默认情况下，选项卡内容会立即加载。预先加载的选项卡将初始化子组件，但在激活选项卡之前不会将它们注入到 DOM 中。

如果选项卡包含多个复杂的子组件或者选项卡的内容在初始化期间依赖于 DOM 计算，建议延迟加载选项卡的内容。

通过使用matTabContent属性在ng-template中声明正文，可以延迟加载选项卡内容。

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      The First Content
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      The Second Content
    </ng-template>
  </mat-tab>
</mat-tab-group>