如何让不同的 MAT-TAB 共享相同的 HTML 代码

Question

我在 mat-tab-group 中设置了 mat-tab，问题是它们都共享 table 的相同 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>

Answer 1

您可以使用 ng-template 这样做：

<mat-tab-group (selectedTabChange)="tabClick($event)" [hidden]=isPageLoading() [@fadeIn]>
    <mat-tab label="A">
         <ng-container *ngTemplateOutlet="tabContent"></ng-container>
    </mat-tab>
    <mat-tab label="B">
         <ng-container *ngTemplateOutlet="tabContent"></ng-container>
    </mat-tab>
    <mat-tab label="C">
         <ng-container *ngTemplateOutlet="tabContent"></ng-container>
    </mat-tab>
</mat-tab-group>

<ng-template #tabContent >
   <HTML CODE>
</ng-template>

编辑：

有答案的工作https://stackblitz.com/edit/angular-yqdsr6。

对于多个 mat-paginator，你必须使用 @ViewChildren 而不是 @ViewChild

我还必须调整您 app.module.ts

中的导入

如何让不同的 MAT-TAB 共享相同的 HTML 代码

How to make different MAT-TAB share same HTML code

tabs

angular-material

angular

mat-tab