javascript - เรียกใช้งานคอมโพเนนต์ลูกด้านในสไลเดอร์ใน Angular

ฉันได้สร้างสไลเดอร์นี้ขึ้น

ลิงก์ที่ใช้งานได้: https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
ส่วนประกอบ 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>

ฉันต้องเรียกคอมโพเนนต์ลูกภายในสไลเดอร์เหมือน

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

เกิดข้อผิดพลาดนี้เมื่อคลิกปุ่มถัดไป:

ข้อผิดพลาด: ไม่สามารถอ่านคุณสมบัติของค่าที่ไม่ได้กำหนด (การอ่าน 'className')

มีวิธีแก้ไขเพื่อเรียกใช้คอมโพเนนต์ลูกภายในสไลเดอร์และแก้ไขข้อผิดพลาดหรือไม่ ขอบคุณ

คำตอบ #1

คุณมีรหัสนี้อยู่ในสแตกบิทของคุณ:

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

และไม่มีองค์ประกอบใดที่มีคลาส "dot" ในเทมเพลตของคุณ

ดังนั้นเมื่อคุณทำแบบนี้:

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

ค่าของ dots[this.slideIndex - 1] คือ undefined

นี่ก็จะทำให้คุณได้รับข้อผิดพลาด

ไม่สามารถอ่านคุณสมบัติของ undefined (กำลังอ่าน 'className')

ในการแก้ไขปัญหานี้ คำแนะนำของฉันคือคุณไม่ควรใช้ querySelectorAll ในโค้ด Angular ของคุณเลย...

ผมจะสมมติว่าคุณมีตัวแปรในคอมโพเนนต์จริงของคุณซึ่งเป็นรูปแบบของอาร์เรย์บางประเภทที่สร้างองค์ประกอบที่มีคลาส "dot" ดังนั้นเมื่อคลิกปุ่ม คุณควรจัดการตัวแปรอาร์เรย์นี้ แทนที่จะทำการค้นหาในเทมเพลตเพื่อหาผลลัพธ์ของมัน

การไหลเชิงมุมที่เหมาะสมคือ

แก้ไขข้อมูลในส่วนประกอบ
แม่แบบทั้งหมดที่ได้รับผลกระทบถูกอัปเดตแล้ว

หวังว่านี่จะช่วยให้คุณก้าวหน้าได้!

คำตอบ #2

Angular ไม่ได้มีแค่ JavaScript คุณควรพิจารณาใหม่เกี่ยวกับ carousel ของคุณโดยใช้ตัวแปรและ [class.active]="variable" เพื่อเปลี่ยนคลาส และตัวแปรอ้างอิงเทมเพลตและ @ViewChildren() เพื่อเข้าถึง nativeElements หากจำเป็น

ข้อจำกัดความรับผิดชอบ: นี่เป็นเพียงตัวอย่าง ที่ยังไม่สมบูรณ์ (และอาจมีข้อผิดพลาด) ของการใช้ตัวแปรใน .ts ที่ถูกใช้ใน .html ทำให้โค้ดดู "อ่านง่าย" และ "เป็นมิตรกับ Angular" มากขึ้น โดยใช้สไตล์ "JavaScript" ด้วยการใช้ document.querySelectorAll และ className.replace

โดยย่อ ถ้าคุณมี เช่น บางอย่างที่ชอบ

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

คุณสามารถกำหนดบางอย่างเช่น

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

selectedIndex:number=0;

และใช้บางอย่างเช่น

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

การใช้ไฟล์ .css เช่น

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