角度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。