单击选项卡后加载组件

Question

仅在单击选项卡时，我才尝试加载和初始化组件。下面的简单示例显示了如何将组件放入内容选项卡。它始终使用主要组件进行初始化。我请教，单击选项卡后如何加载组件？

<tabset>
    <tab heading="History of User">
      <history-component [someInputProp]="someVariable"></history-component>
    </tab>
    <tab heading="Session of User">
      <session-component [someInputProp]="someVariable"></session-component>
    </tab>
</tabset>

Answer 1

使用（选择） （select）=“ onSelect（$ event）”

示例：

 <tab heading="Public Holidays" id="tab5" (select)="onSelect($event)">
            <ng-container *ngIf="selectedTab == 'Public Holidays'">            
                <app-public-holiday-setting></app-public-holiday-setting>
            </ng-container>   
 </tab>

在component.ts

中

export class MyTabsComponent implements OnInit {
  selectedTab: string;
    constructor() { }

  ngOnInit() {
  }

  onSelect(data: TabDirective)
  {
    this.selectedTab = data.heading;
  }

}