迭代相同組件angular2的多個@ViewChild實例

Question

我有一個Ionic 2應用程序，其中ParentComponent調用ChildComponent @ViewChild方法來啟動多個ChildComponents。 其中一個ChildComponents在視圖中使用不同的參數實例化兩次，如下所示：

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