javascript - Angular'da slider içinde çocuk bileşeni çağırma

Bu kaydırıcıyı oluşturdum

Çalışan bağlantı: https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

HTML Bileşeni :

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

Slider içinde çocuk bileşeni şu şekilde çağırmam gerekiyor

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

Sonraki düğmesine tıkladığımda bu hatayı alıyorum:

HATA Hata: Tanımsızın özellikleri okunamıyor ('className' okunuyor)

Slider içinde çocuk bileşeni çağırmak ve hatayı düzeltmek için herhangi bir çözüm, teşekkürler

Cevap #1

bu kodu stackbitz'inizde var:

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

ve şablonlarınızda "dot" sınıfına sahip öğeler yok.

yani bunu yaptığında:

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

dots[this.slideIndex - 1] değerinin undefined olduğu

bu size ardından hatayı verir

Tanımsızın özellikleri okunamıyor ('className' okunuyor)

Bunu düzeltmek için önerim, Angular kodunuzda hiçbir zaman querySelectorAll kullanmamanızdır...

Gerçek bileşeninizde, bu "dot" sınıfına sahip elemanları üreten bir tür dizi olan bir değişkeniniz olduğunu varsayacağım. Bu yüzden butona tıkladığınızda, şablondaki sonuçları sorgulamak yerine bu dizi değişkenini manipüle etmelisiniz.

İdeal açısal akış

  1. bileşendeki veriyi değiştir
  2. tüm etkilenen şablonlar güncellendi

umarım bu ilerlemenize yardımcı olur!

Cevap #2

Angular sadece JavaScript değildir. Sınıfı değiştirmek için değişkenleri ve [class.active]="variable" kullanarak karuselinizi yeniden düşünmeli ve gerekirse yerel elemanları almak için şablon referans değişkenlerini ve @ViewChildren()'i kullanmalısınız.

Sorumluluk Reddi: Bu sadece değişkenlerin .ts dosyasında kullanılıp .html dosyasında kullanılmasıyla ilgili tamamlanmamış (ve muhtemelen hatalı) bir örnektir; bu, document.querySelectorAll ve className.replace kullanarak bir "javascript tarzı" tercih etmek yerine daha "okunaklı" ve "kullanıcı dostu Angular" kullanımı sağlar.

Kısaca, eğer sahipsen, örneğin bazıları gibi

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

Birkaçını şöyle tanımlayabilirsiniz

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

selectedIndex:number=0;

Ve bazıları gibi kullan

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

.css kullanmak gibi

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