Получить html структуру (или шаблон) директивы элемента - PullRequest
Новая
       22

Получить html структуру (или шаблон) директивы элемента

2 голосов
/ 22 июня 2019

У меня есть компонент со следующей структурой 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 (в данный момент в этой директиве ничего нет).

Я хочу получить доступ к структуре/ template элемента, к которому относится директива (в данном случае таблица).

Причина, по которой я хочу, заключается в том, чтобы иметь возможность динамически создавать эту таблицу с той же структурой, но с разным источником данных и иметь возможность вычислятьразмер столбцов с новым источником данных.Это делается с целью обеспечения отзывчивости (как вы можете понять из названия директивы).Я хочу знать, какие столбцы вызывают переполнение таблицы, но я не хочу добавлять их в текущую таблицу, а затем проверять, все ли в порядке, и действовать исходя из этого, вместо этого я хочу сделать это в «стороне».

1 Ответ

0 голосов
/ 22 июня 2019

Может быть, ViewContainerRef поможет вам.T

Так вы можете получить структуру html, используя ViewContainerRef 

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

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

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