Angular 6:获取对在ng容器标签内使用*ngFor创建的组件的引用

Question

我正在使用ng-container迭代列表并创建组件

<ng-container *ngFor="let f of optionsList; let i = index;">
<!-- component-->
<app-component  #fieldcmp  *ngIf="isAppComponent(f)" ></app-field>

<!--another components-->
<app-anoter-component1 *ngIf="isAnotherComponent1(f)"> </app-anoter-component1>
...
<app-anoter-componentn *ngIf="isAnotherComponentn(f)"> </app-anoter-componentn>
</ng-container>

我会列出 ng 容器内的引用组件。

我尝试使用 @ViewChildren('#fieldcmp'( 字段列表：查询列表;和 @ContentChildren('#fieldcmp'( 字段列表： 查询列表; 在父亲组件中，但如果我尝试在 ngafterViewInit 中访问，我没有得到任何元素

ngAfterViewInit() {
this.fieldsList.forEach((child) => {  /* some logic....*/});
}

有人可以帮助我吗？ 谢谢

-----------更新-----------------------

使用 @ViewChildren('fieldcmp'( 修复后，我有一个ElementRef列表而不是我的 AppComponent。 我投了它和所有的工作

this.filedsList 
.forEach((child) => { atLeastOneRequired = atLeastOneRequired || (<ReusableFieldComponent> child).isRequired();
});

谢谢你的帮助

Answer 1

只需从ViewChildren选择器中删除#符号 - 仅在模板中使用：

@ViewChildren('fieldcmp') fieldsList: QueryList;

或者，您可以使用组件类作为选择器：

@ViewChildren(HelloComponent) fieldsList: QueryList<HelloComponent>;

在这里工作堆栈闪电战：https://stackblitz.com/edit/angular-xeudlp

Answer 2

尝试创建并清空directive，然后查询指令并读取ElementRef。

@ViewChildren(MyDirective, {read: Element Ref}) Kids: QueryList<ElementRef>;

我面前没有电脑，但这就是我的想法。