He creado este control deslizante
Enlace de trabajo: https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
Componente HTML:
<div class="slideshow-container"> <ng-container> <div class="mySlides animated fadeInRight">Slide 1</div> <div class="mySlides animated fadeInRight">Slide 2</div> </ng-container> </div> <button class="btn ansbtn" (click)="plusSlides(-1)">Previous</button> <button class="btn ansbtn" (click)="plusSlides(1)">Next</button>tengo que llamar al componente secundario dentro del control deslizante como
<ng-container *ngFor="let o of list; let i=index"> <child-component-1 *ngIf="i==0"> </child-component-1> <child-component-2 *ngIf="i==1"> </child-component-2> .. <child-component-n *ngIf="i==n"> </child-component-n> </ng-container>Obteniendo este error al hacer clic en el siguiente botón:
ERROR Error: no se pueden leer las propiedades de undefined (leyendo 'className')
Cualquier solución para llamar al componente secundario dentro del control deslizante y corregir el error, gracias
tienes este código en tu stackbitz:
var dots = this.elem.nativeElement.querySelectorAll('.dot');y no hay elementos con una clase de "punto" en sus plantillas.
entonces cuando haces esto:
dots[this.slideIndex - 1].className += ' active'; el valor de dots[this.slideIndex - 1] no está undefined ;
esto entonces te da el error
No se pueden leer las propiedades de undefined (leyendo 'className')
Para solucionarlo, mi sugerencia es que nunca use un querySelectorAll en ninguno de sus códigos angulares...
Asumiré que tiene una variable en su componente real que es una especie de matriz que genera elementos con esta clase de "punto". por lo tanto, al hacer clic en el botón, debe manipular esta variable de matriz y no realizar una consulta en la plantilla para obtener sus resultados.
El flujo angular ideal es
¡Ojalá esto te ayude a progresar!
Angular no es solo javascript. Debería repensar su carrusel usando variables y [class.active]="variable" para cambiar las variables de referencia de clase y plantilla y @ViewChildren() para obtener los nativeElements si fuera necesario.
Descargo de responsabilidad: es solo un ejemplo incompleto (y posiblemente erróneo) de usar variables en .ts que se usan en .html hace más "legible" y "angular amigable" que usa un "estilo javascript" usando document.querySelectorAll y className.replace
En resumen, si tiene, por ejemplo, algunos como
<div #slide class="mySlides animated fadeInRight" [ngClass]="className[0]"> Slide 1 </div> <div #slide class="mySlides animated fadeInRight" [ngClass]="className[1]"> Slide 2 </div>Puedes definir algunos como
@ViewChildren('slide') slides:QueryList<ElementRef> className:string[]=[] selectedIndex:number=0;Y usa algunos como
slides.forEach((x,index)=>{ this.className[index]=index==selectedIndex?'block active' :'none' })Usando un .css como
.active{...} .none{display:none} .block{display:block}