angular4を使用してタブにコンポーネントを追加するにはどうすればよいですか？

Question

私はangular4とangle2を使って作業しています。

私は、次のコード

<md-tab-group color="primary"> 
     <md-tab label="Employee"> 
      <app-employee></app-employee> 
     </md-tab> 
     <md-tab label="Department"> 
      <app-department></app-department> 
     </md-tab> 
     <md-tab label="Attendance"> 
      <app-attendance></app-attendance> 
     </md-tab> 
    </md-tab-group> 

は今、すべてのコンポーネントが最初にロードされているが、私は私が対応するタブを選択していたときに、特定のコンポーネントをロードします。

Answer 1

NB。角度のある素材が最近更新され、コンポーネントの名前が変更されました。 <md-tab>は<mat-tab>になりました。 DOC：https://material.angular.io/components/tabs/api

希望するものは遅延ロードのタブの内容です。 Angularマテリアルドキュメントによると、現時点では可能ではないようです。ここで

は、いくつかの回避策です。1.子コンポーネントの

<mat-tab-group color="primary" #tabGroup> 
    <mat-tab label="Employee"> 
    <app-employee *ngIf="tabGroup.selectedIndex === 0"></app-employee> 
    </mat-tab> 
    <mat-tab label="Department" #tabDepartment> 
    <app-department *ngIf="tabGroup.selectedIndex === 1"></app-department> 
    </mat-tab> 
    <mat-tab label="Attendance"> 
    <app-attendance *ngIf="tabGroup.selectedIndex === 2"></app-attendance> 
    </mat-tab> 
</mat-tab-group> 

そのtabgroupのselectedIndexプロパティに基づいてオプション2タブグループのselectedIndexChange()イベントに耳を傾けるを有効に

オプション

このイベントのイベントハンドラで動的に一部のコンテンツを読み込みます。

のような何か：

<mat-tab-group (selectedIndexChange)="loadDynamicContent()"> 
    <mat-tab> 
    {{ dynamicContent }} 
    </mat-tab> 
</mat-tab-group> 

私はここにこのアイデアを見つけました：https://stackoverflow.com/a/45980187