获取元素指令的html结构(或模板)

时间:2019-06-22 11:02:40

标签: angular angular2-directives

我有一个具有以下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>

1 个答案:

答案 0 :(得分:0)

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

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

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

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

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