Acceda a varios viewchildren usando @viewchild [duplicar]

Esta pregunta ya tiene una respuesta aquí:

He creado un componente personalizado que he colocado en un bucle for, por ejemplo

<div *ngFor="let view of views">

     <customcomponent></customcomponent>

</div>

Cuya salida será: 

<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>

Me gustaría saber cómo puedo obtener una referencia a estos componentes usando la sintaxis @viewchild o cualquier otro medio cuando el número de estos componentes puede variar

Cuando al componente se le puede dar un nombre, por ejemplo

<customcomponent #compID></customcomponent>

Entonces puedo referenciarlo de la siguiente manera: 

@ViewChild('compID') test: CustomComponent

¿Cómo puedo referenciarlo cuando este no es el caso, por ejemplo, utilizando un índice posiblemente?

(Esta pregunta no se relaciona con el uso de ElementRef según otras preguntas que se han hecho previamente, como se puede ver en las respuestas que se enumeran a continuación) Esta pregunta se relaciona con el acceso a múltiples @ViewChild y el uso de lista de consultas.

 48
angular
Author: Vega, 2016-10-21
Source

2 answers

Use @ViewChildren desde @angular/core para obtener una referencia a los componentes

Plantilla

<div *ngFor="let v of views">
    <customcomponent #cmp></customcomponent>
</div>

Componente

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components:QueryList<CustomComponent>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components._results);
}

Demostración en Vivo

 95
Author: BeetleJuice,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-01 11:31:35

Utilice el decorador @ViewChildren combinado con QueryList. Ambos son de "@ angular / core "

@ViewChildren(CustomComponent) customComponentChildren: QueryList<CustomComponent>;

Hacer algo con cada niño parece: this.customComponentChildren.forEach((child) => { child.stuff = 'y' })

Hay más documentación que se puede tener en angular.io, específicamente: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#sts=Parent%20calls%20a%20ViewChild

 42
Author: silentsod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-20 22:20:52