如何从Angular 2中的QueryList获取子元素?

时间:2017-08-16 09:43:35

标签: angular viewchild

我是Angular2的新手。在我看来,我有几个相同的孩子在* ngFor。

中生成
<ngb-panel *ngFor="let client of clients" [title]="'Client #' + client.id">
    <template ngbPanelContent>
        <processing-item [client]="client"></processing-item>
    </template>
</ngb-panel>

我需要在父元素中调用这些组件的方法,找出ViewChildren装饰器,代码是:

@ViewChildren(ProcessingItemComponent) processingItems: QueryList<ProcessingItemComponent>;

然后我尝试通过forEach迭代它们:

ngAfterViewInit() {
    this.processingItems.forEach(function (el) {
        console.log(el);
    });
}

但它什么都没做。在QueryList上调用的toArray()方法返回空数组。

任何建议如何一次获取所有子组件并调用其方法?

2 个答案:

答案 0 :(得分:17)

如果从异步调用设置clients(例如设置到服务器),则ngAfterViewInit()中的元素不存在。

您可以使用

ngAfterViewInit() {
  this.processingItems.changes.subscribe(() => {
    this.processingItems.toArray().forEach(el => {
        console.log(el);
    });
  });
}

另见https://angular.io/api/core/QueryList#changes

答案 1 :(得分:0)

我认为您应该使用@ContentChildren属性而不是ViewChildren。

@ContentChildren( OptionComponent )
public Options: QueryList<OptionComponent>;