组件在 Angular 中可重用时出现问题

Question

我一直在尝试使自定义的 Material Angular Table 组件可重复使用。该组件将能够扩展行以显示详细信息组件。

我的第一个想法是通过父项将列定义和详细信息组件内容投影到可重用表中。 这是伪代码，不要尝试运行它。

expansion-table.ts

getRowId(row: any) {
    return row.id;
} 

// Used to determine which order to expand
expanded: string | undefined;

expansion-table.html

<mat-table multiTemplateDataRows [dataSource]="dataSource">

    <ng-content select="[rowColumns]" /> // column definition
    <ng-container [ngClass]={expanded: expanded === getRowId(row)} matColumnDef="expandedDetail"> 
        <ng-content select="[rowDetail]" /> // details component
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedOuterColumns"></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: displayedColumns"
      (click)="
        expandedRow =
          expandedRow === getRowId(row) ? undefined : getRowId(row) 
      "
    ></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: ['expandedDetail']"
    ></tr>

<mat-table>

然后我传入列定义

parent.ts

mockDisplayedColumns = ['id', 'name'];

mockData = [
    {
      id: 1,
      name: 'John',
    },
    {
      id: 2,
      name: 'Jane',
    },
    {
      id: 3,
      name: 'Bob',
    },
  ];

parent.html

<app-expansion-table
    [setData]="data"
    [displayedColumns]="displayedColumns"
  >
    <ng-container rowColumns matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef class="col">id</th>
      <td mat-cell *matCellDef="let element">id</td>
    </ng-container>
    <ng-container>
      <app-details [data]="row.details" />
    </ng-container>
</app-expansion-table>

但这导致了这个错误：

ERROR Error: Could not find column with id "id".

我怀疑列定义无法投影，并且这不是实现此功能的方法。有没有人有构建此类可重用组件的经验，可以为我指明正确的方向？

Answer 1

官方文档中有一个（基本）示例，介绍如何包装表组件以进行定义和行为重用： https://material.angular.io/components/table/examples#table-wrapped

直接链接到 stackblitz：https://stackblitz.com/run?file=src%2Fapp%2Ftable-wrapped-example.ts