1

のセットがありますが、それらはすべて、タブクリックイベントでキャプチャmat-tabしmat-tab-groupている関数を介して動的に入力されているテーブルの同じ HTML コードを共有しています。

以下はいくつかのコードです、

<mat-tab-group (selectedTabChange)="tabClick($event)" [hidden]=isPageLoading() [@fadeIn]>
    <mat-tab label="A">
        <HTML CODE>
    </mat-tab>
    <mat-tab label="B">
        <HTML CODE>
    </mat-tab>
    <mat-tab label="C">
        <HTML CODE>
    </mat-tab>
</mat-tab-group>

私はすでにこの機能でタブを埋めているので、

tabClick(event: any) {
    console.log(event.index);
    switch (event.index) {
      case 0: 
      this.populateA('','1','999999');
      console.log('Author');
        break;
      case 1: 
      this.populateB('','1','999999');
      console.log('Form');
        break;
      case 2: 
      this.populateC('','1','999999');
      console.log('Location');
        break;
}

ご覧のとおり、その HTML を複数回記述する必要はありません。すべてのタブで同じコードを共有するにはどうすればよいですか。疑似コードは次のようになります。

<mat-tab-group (selectedTabChange)="tabClick($event)" [hidden]=isPageLoading() [@fadeIn]>
    <mat-tab label="A">
    <mat-tab label="B">
    <mat-tab label="C">
        <HTML CODE>
    </mat-tab>
    </mat-tab>
    </mat-tab>
</mat-tab-group>
4

1 に答える 1