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现在包含我的组件，正是我想要的组件，然后我使用组件Factory将组件动态插入到每个viewChild中。

正如您在tmpl中看到的那样。每个组件都有一个id="{{type.uri}}"
有没有办法获取id的值？

我进行了广泛的搜索，到目前为止，我对如何实现这一目标有些困惑。 NativeElement可能是一个选项，但我相信只有ElementRef可用？

可能的解决方案：

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

这给了我id。...但是我不认为这是这样做的方式吗？我的意思是可以，但是感觉不对。

Answer 1

您可以尝试这样

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
}

Answer 2

ViewContainerRef有一个elementRef作为孩子，而孩子又有一个nativeElement孩子（HTML元素本身）。因此，您应该可以执行group.elementRef.nativeElement.id来获取ID

注意：请注意，使用返回HTML元素的console.log(element)会将元素打印为HTML，在这种情况下，请使用console.dir

Answer 3

@ViewChildren("vc", {read: ViewContainerRef}) containers: QueryList<ViewContainerRef>
    
ngAfterViewInit(): void {
  this.containers.map(container => console.log(container["_lContainer"][0].id))
  this.createLayout();
}

这在Angular 10中对我有用

获取HTML属性。与ViewContainerRef？

3 个答案: