Angular 4材质选项卡在选项卡选择上加载 [英] Angular 4 Material Tabs Load on Tab Select

问题描述

是否可以在Angular Material选项卡上实现延迟加载?否则，在进入标签页时，我将需要一种方法来运行方法.

Is it possible to achieve lazy loading on Angular Material Tabs? Otherwise I would need a way to run a method when entering a tab.

推荐答案

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

You can use the selectChange event provided by <md-tab-group>. It fires when a tab selection is changed. From the documentation:

@Output()selectChange:选项卡选择具有时发出的事件 改变了.

@Output() selectChange : Event emitted when the tab selection has changed.

在您的模板中:

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

...以及您的打字稿代码:

... and in your typescript code:

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

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

链接到工作演示.

这篇关于Angular 4材质选项卡在选项卡选择上加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！