角度4材料标签加载标签选择

Question

是否可以在角度材料标签上实现延迟加载？否则，我需要一种方法来在进入选项卡时运行方法。

Answer 1

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

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

...在你的打字稿代码：

链接working demo。

Answer 2

作为文档读取

虽然<md-tab-group>使用单个 路线内视图之间进行切换，<nav md-tab-nav-bar>提供了一种用于路由之间进行导航 翼状UI。

通过使用此方法，可以使每个选项卡单独路由，因此每次激活路由时都会加载每个页面。

<nav md-tab-nav-bar> 
    <a md-tab-link 
    *ngFor="let link of navLinks" 
    [routerLink]="link" 
    routerLinkActive #rla="routerLinkActive" 
    [active]="rla.isActive"> 
    {{tabLink.label}} 
    </a> 
</nav> 

<router-outlet></router-outlet> 

请下选项卡和导航部分获取更多here。