可重复使用的角形11模板

Question

我有两个mat选项卡，每个选项卡中都有一个表，具有相同的数据布局，只是不同的数据源。

<mat-tab-group>
<mat-tab label="table 1">        
<table mat-table [dataSource]="dataSource1">       <-- one data source
<ng-container matColumnDef="col1">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let val"> some Data </td>
</ng-container>
<ng-container matColumnDef="col2">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let val"> some Data </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['col1', 'col2']"></tr>
<tr mat-row *matRowDef="let row; columns: ['col1', 'col2'];"></tr>
</table>
</mat-tab>
<mat-tab label="table 2">        
<table mat-table [dataSource]="dataSource2">       <-- another data source
<ng-container matColumnDef="col1">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let val"> some Data </td>
</ng-container>
<ng-container matColumnDef="col2">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let val"> some Data </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['col1', 'col2']"></tr>
<tr mat-row *matRowDef="let row; columns: ['col1', 'col2'];"></tr>
</table>
</mat-tab>
</mat-tab-group>

正如你所看到的，行和列完全相同，所以我想重用下面的表模板：

<table mat-table [dataSource]="dataSource2">
<ng-container *ngTemplateOutlet="tableContent"></ng-container>
</table>
...
<ng-template #tableContent>
<ng-container matColumnDef="col1">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let val"> some Data </td>
</ng-container>
<ng-container matColumnDef="col2">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let val"> some Data </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['col1', 'col2']"></tr>
<tr mat-row *matRowDef="let row; columns: ['col1', 'col2'];"></tr>
</ng-template>

用这个我得到：

错误：缺少页眉、页脚和行的定义；不能确定应该呈现哪些列。

如何定义一次模板？

Answer 1

为什么不创建一个MyTableComponent并将数据作为输入接收？

最终的HTML应该是这样的：

<mat-tab-group>
<mat-tab label="table 1">        
<my-table [data]="dataSource1"></my-table>
</mat-tab>
<mat-tab label="table 2">        
<my-table [data]="dataSource2"></my-table>
</mat-tab>
</mat-tab-group>

任一

如果你坚持使用ngTemplateOutlet解决方案，如果你在模板中添加table标签并在templateOutput中传递数据，它可能会起作用(阅读：如何使用NgTemplateOutlet并搜索Passing data to ngTemplateOutlet(