简体   繁体   English

迭代相同组件angular2的多个@ViewChild实例

[英]Iterate through multiple @ViewChild instances of the same component angular2

I have an Ionic 2 application with a ParentComponent calling ChildComponent @ViewChild method to fire up multiple ChildComponents. 我有一个Ionic 2应用程序,其中ParentComponent调用ChildComponent @ViewChild方法来启动多个ChildComponents。 One of the ChildComponents get's instantiated twice in the view with different parameters like so: 其中一个ChildComponents在视图中使用不同的参数实例化两次,如下所示:

<ChildComponent [startFrom]="0" [limitTo]="1"></ChildComponent>
<ChildComponent [startFrom]="1" [limitTo]="1"></ChildComponent>

After an offline/online device state change, I call ChildComponent's method to update a list of items it returns. 在离线/在线设备状态更改后,我调用ChildComponent的方法来更新它返回的项目列表。

@ViewChild(ChildComponent) childComponent: ChildComponent;

ngOnInit(): void {
    this.networkService.connectSubscription(() => {
        this.childComponent.getItems();
    });
}

The issue here is this.childComponent only get's hold of the first ChildComponent instance of the two. 这里的问题是this.childComponent只能抓住两者的第一个ChildComponent实例。

Is there a way to iterate through multiple instances of the same @ViewChild component so I could do something like this.childComponent1.getItems() and this.childComponent2.getItems() ? 有没有办法迭代同一个@ViewChild组件的多个实例,所以我可以做类似this.childComponent1.getItems()this.childComponent2.getItems()事情?

Thanks for your help. 谢谢你的帮助。

@ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;
ngAfterViewInit(): void {
    this.networkService.connectSubscription(() => {
        this.childComponents.toArray();
    });
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM