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

【问题标题】：How to make different MAT-TAB share same HTML code如何让不同的 MAT-TAB 共享相同的 HTML 代码
【发布时间】：2020-02-17 20:10:01
【问题描述】：

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

【问题讨论】：

标签： angular tabs angular-material mat-tab

【解决方案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-table 和分页器，这使得分页器停止工作，怎么回事？也许这是在加载数据后呈现的？
分页器停止工作，我的意思是完整的数据正在显示在桌子上，应该已经被分页器破坏了。
我在您分享的代码中没有看到 mat-table。你能用完整的更新代码更新吗？
查看材料文档，mat-paginator 需要直接在表格之后。所以你的位置很重要。您可以将 ng-template 放在页面上的任何位置.. 只需确保 mat-paginator 直接位于 table 标签之后
我把它放在table 标签之后，仍然显示完整的数据。从我过去的错误来看，这发生在我稍后渲染 HTML 时，这迫使我使用 hidden 而不是 *ngIf。