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

Question

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

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

在 offline/online 设备状态更改后，我调用 ChildComponent 的方法来更新它的项目列表 returns。

@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();
    });
}

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

Iterate through multiple @ViewChild instances of the same component angular2

javascript

ionic2

angular2-components

angular