Question

我有一个具有以下HTML结构的组件：

<table mat-table
       [dataSource]="rowItems"
       appResponsiveTable>

  <ng-container matColumnDef="itemName">
    <th mat-header-cell
        *matHeaderCellDef> </th>
    <td mat-cell
        *matCellDef="let element"> {{ element.itemName }} </td>
  </ng-container>

  <tr mat-header-row
      *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row
      *matRowDef="let element; columns: displayedColumns;">
  </tr>


</table>

，我有指令appResponsiveTable（目前该指令中什么都没有）。

我想访问指令所在元素的结构/模板（在这种情况下为表）。

我想要它的原因是能够动态创建具有相同结构但具有不同dataSource的表，并能够使用新的dataSource计算列的大小。这是出于响应目的（您可以从指令的名称中了解）。我想知道哪些列导致表溢出，但是我不想将它们添加到当前表中，然后检查是否可以运行并基于此进行操作，而我想在“侧面”进行操作。 / p>

Answer 1

也许ViewContainerRef会为您提供帮助。 T

这是使用ViewContainerRef获取html结构的方法

<template #viewRef>
      <h1>ViewContainerRef</h1>
</template>

  @ViewChild('viewRef', { read: ViewContainerRef }) viewRef;

  ngAfterViewInit() {
    console.log(this.viewRef.nativeElement)
  }

获取元素指令的html结构（或模板）

1 个答案: