javascript - 遍历同一组件angular2的多个@ViewChild实例

Question

我有一个 Ionic 2 应用程序，它的 ParentComponent 调用 ChildComponent @ViewChild 方法来启动多个 ChildComponent。其中一个 ChildComponents get 在 View 中使用不同的参数实例化了两次，如下所示:

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

在离线/在线设备状态更改后，我调用 ChildComponent 的方法来更新它返回的项目列表。

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

这里的问题是 this.childComponent 只获取了两者的第一个 ChildComponent 实例。

有没有一种方法可以遍历同一个 @ViewChild 组件的多个实例，这样我就可以做一些像 this.childComponent1.getItems() 和 this.childComponent2.getItems()?

感谢您的帮助。

Answer 1

@ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;

ngAfterViewInit(): void {
    this.networkService.connectSubscription(() => {
        this.childComponents.toArray();
    });
}