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

问题描述

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

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.

推荐答案

您可以使用 提供的 selectChange 事件.更改选项卡选择时会触发.来自文档:

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

@output()选择:选项卡选择时发出的事件改变了.

@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屋！