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

2

您可以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 中的导入

于 2019-10-21T17:33:50.667 回答