Tengo la siguiente estructura DOM
<div #carousalElement> <div class="singleCaousalElement"> <a> <img [src]="carousalURL1" class="carousalImage"> </a> </div> <div class="singleCaousalElement"> <a> <img [src]="carousalURL2" class="carousalImage"> </a> </div> </div> Puedo obtener todos los divs con la clase carousalElements usando ViewChildren
@ViewChildren('carousalElement') carousalElements; PROBLEMA: cuando agrego dinámicamente un nuevo div debajo del div #carousalElement , no aparece debajo de la matriz carousalElements .
¿Me estoy perdiendo algo obvio?
Angular no reconoce HTML no agregado por directivas o API de Angular. Además, si <div> no tiene una variable de plantilla #carousalElement , @ViewChildren('carousalElement') no la encontrará.
Las variables de plantilla deben agregarse estáticamente en la plantilla de componentes. Agregarlos dinámicamente no tiene sentido. Angular procesa construcciones de plantillas específicas de Angular solo durante la compilación de una plantilla.
Puede agregar el servicio ChangeDetectorRef y llamar al método this.changeDetectorRef.detectChanges() cuando agrega otro elemento secundario con la referencia a la que hizo referencia en ViewChildren QueryList. ¡Eso funcionó para mí!
En el momento en que agrega un nuevo elemento en su carousalElement div en ese momento, verifique en DOM si ese elemento está disponible o no.
Si está disponible, obtenga el elemento por:
this.carousalElements.NativeElement......Si no está disponible, intente establecer un tiempo de espera y luego verifique nuevamente en DOM
setTimeout(() => { //your logic }, 200);Todavía no lo encuentra, intente con la siguiente lógica:
@ViewChildren('carousalElement', { read: ViewContainerRef }) public carousalElement: QueryList<ViewContainerRef>;Y donde revisas console.log(this.carousalElement)
Déjame saber lo que da