Как заставить разные MAT-TAB использовать один и тот же HTML-код - PullRequest
Новая
       33

Как заставить разные MAT-TAB использовать один и тот же HTML-код

0 голосов
/ 21 октября 2019

У меня есть набор 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>

1 Ответ

0 голосов
/ 21 октября 2019

Вы можете использовать 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 с ответом.

С несколькими мат-paginator вам придется использовать @ViewChildren вместо @ ViewChild

Мне также пришлось настроить импорт в вашем app.module.ts

...