javascript - Anropa barnkomponent inuti slider i Angular

Jag har skapat den här reglaget

Fungerande länk: https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

HTML-komponent :

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

jag måste anropa barnkomponent inuti slider som

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

Får detta fel vid klick på nästa knapp:

FEL Fel: Kan inte läsa egenskaper av undefined (läser 'className')

Finns det någon lösning för att anropa ett barnkomponent inne i en slider och åtgärda felet, tack

Svar #1

du har denna kod på din stackbitz:

var dots = this.elem.nativeElement.querySelectorAll('.dot');

och det finns inga element med klassen "dot" i dina mallar.

så när du gör detta:

dots[this.slideIndex - 1].className += ' active';

värdet av dots[this.slideIndex - 1] är undefined;

detta ger dig då felet

Kan inte läsa egenskaper av undefined (läser 'className')

För att fixa det är mitt förslag att du aldrig använder en querySelectorAll i någon av din Angular-kod...

Jag kommer att anta att du har en variabel i din faktiska komponent som är någon sorts array som genererar element med denna "dot"-klass. Så när du klickar på knappen bör du manipulera denna array-variabel, och inte göra en förfrågan på mallen efter dess resultat.

Den ideala vinkelflödet är

  1. ändra data i komponenten
  2. alla de påverkade mallarna är uppdaterade

förhoppningsvis hjälper detta dig att göra framsteg!

Svar #2

Angular är inte bara javascript. Du bör tänka om kring ditt karusell-användande genom variabler och [class.active]="variable" för att ändra klassen samt mallreferensvariabler och @ViewChildren() för att få nativeElements om det var nödvändigt.

Ansvarsfriskrivning: Det är bara ett ofullständigt (och möjligtvis felaktigt) exempel på att använda variabler i .ts som används i .html gör mer "läsbart" och "vänligt Angular" än att använda en "JavaScript-stil" med document.querySelectorAll och className.replace

Kort sagt, om du har, t.ex. något som

   <div #slide class="mySlides animated fadeInRight" [ngClass]="className[0]">
        Slide 1
   </div>
   <div #slide class="mySlides animated fadeInRight"  [ngClass]="className[1]">
        Slide 2
   </div>

Du kan definiera några som

@ViewChildren('slide') slides:QueryList<ElementRef>
className:string[]=[]

selectedIndex:number=0;

Och använd några som

slides.forEach((x,index)=>{
    this.className[index]=index==selectedIndex?'block active'
                                              :'none'
})

Att använda en .css som

.active{...}
.none{display:none}
.block{display:block}