curso - angular wikipedia

Acceda a múltiples viewchildren usando @viewchild

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo seleccionar un elemento en una plantilla de componente? 10 respuestas

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

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

     <customcomponent></customcomponent>

</div>

La salida de la cual será:

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

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

cuando el componente puede recibir un nombre, p. ej.

<customcomponent #compID></customcomponent>

Entonces puedo referenciarlo de la siguiente manera:

@ViewChild(''compID'') test: CustomComponent

¿Cómo lo hago referencia cuando este no es el caso, por ejemplo, usando 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 consultas de lista.

Answer 1

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

modelo

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

demo en vivo

Answer 2

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

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

Hacer algo con cada hijo se ve así: this.customComponentChildren.forEach((child) => { child.stuff = ''y'' })

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