Получение HTML-атрибута. с ViewContainerRef?

Question

Я добавляю компонент в свой шаблон через *ngFor

<div class="filter-group" *ngFor="let type of entityTypes">
  <filter-filter-group [type]="type" id="{{type.uri}}"></filter-filter-group>
</div>

И в моем компоненте я получаю свои ViewChrildren, вот так

  @ViewChildren(FilterGroupComponent, { read: ViewContainerRef }) filterGroup: QueryList<ViewContainerRef>;

this.filterGroup теперь содержит мои компоненты, и это именно то, что мне нужно, поскольку я затем использую фабрику компонентов для динамической вставки компонентов в каждый viewChild.

Как вы можете видеть в tmpl. каждый компонент имеет id="{{type.uri}}"
Есть ли способ получить значение id?

Я искал повсюду и пока немного растерялся, как этого добиться. NativeElement может быть вариантом, но я считаю, что он доступен только с ElementRef?

Возможное решение:

console.log(group['_data'].renderElement.id);

это дает мне идентификатор .... но я не думаю, что это будет способ сделать это? Я имею в виду, что это работает, но чувствует себя неправильно.

Answer 1

ViewContainerRef имеет elementRef как дочерний элемент, который, в свою очередь, имеет nativeElement дочерний элемент (сам по себе элемент HTML). Таким образом, вы должны быть в состоянии сделать group.elementRef.nativeElement.id, чтобы получить идентификатор

Примечание. Помните, что при использовании console.log(element), возвращающем элемент HTML, этот элемент будет напечатан как HTML, для этих случаев вместо этого используйте console.dir

Answer 2

вы можете попробовать вот так

HTML

<div class="filter-group" *ngFor="let type of entityTypes">
  <filter-filter-group [type]="type" #mycomp id="{{type.uri}}"></filter-filter-group>
</div>

TS

@ViewChildren('mycomp') mycompRef: any;

someEvent() {
   console.log(this.mycompRef); // in this object you will get the id
}