javascript - Iterate through multiple @ViewChild instances of the same component angular2 - Stack Overflow

admin管理员组

文章数量:1026192

I have an Ionic 2 application with a ParentComponent calling ChildComponent @ViewChild method to fire up multiple ChildComponents. One of the ChildComponents get's instantiated twice in the view with different parameters like so:

<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.

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

The issue here is this.childComponent only get's hold of the first ChildComponent instance of the two.

Is there a way to iterate through multiple instances of the same @ViewChild ponent so I could do something like this.childComponent1.getItems() and this.childComponent2.getItems()?

Thanks for your help.

I have an Ionic 2 application with a ParentComponent calling ChildComponent @ViewChild method to fire up multiple ChildComponents. One of the ChildComponents get's instantiated twice in the view with different parameters like so:

<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.

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

The issue here is this.childComponent only get's hold of the first ChildComponent instance of the two.

Is there a way to iterate through multiple instances of the same @ViewChild ponent so I could do something like this.childComponent1.getItems() and this.childComponent2.getItems()?

Thanks for your help.

• javascript
• angular
• ionic2
• angular2-ponents

Share Improve this question Follow asked Apr 10, 2017 at 8:57 CyberRobotCyberRobot 74499 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

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

I have an Ionic 2 application with a ParentComponent calling ChildComponent @ViewChild method to fire up multiple ChildComponents. One of the ChildComponents get's instantiated twice in the view with different parameters like so:

<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.

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

The issue here is this.childComponent only get's hold of the first ChildComponent instance of the two.

Is there a way to iterate through multiple instances of the same @ViewChild ponent so I could do something like this.childComponent1.getItems() and this.childComponent2.getItems()?

Thanks for your help.

I have an Ionic 2 application with a ParentComponent calling ChildComponent @ViewChild method to fire up multiple ChildComponents. One of the ChildComponents get's instantiated twice in the view with different parameters like so:

<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.

@ViewChild(ChildComponent) childComponent: ChildComponent;

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

The issue here is this.childComponent only get's hold of the first ChildComponent instance of the two.

Is there a way to iterate through multiple instances of the same @ViewChild ponent so I could do something like this.childComponent1.getItems() and this.childComponent2.getItems()?

Thanks for your help.

• javascript
• angular
• ionic2
• angular2-ponents

Share Improve this question Follow asked Apr 10, 2017 at 8:57 CyberRobotCyberRobot 74499 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

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

本文标签： javascriptIterate through multiple ViewChild instances of the same component angular2Stack Overflow