如何在 Angular 的同一頁面上使用多個 ngx-slick-carousel？

Question

我在我的頁面上使用了光滑的輪播，但它給了我一個錯誤並且不顯示第二個輪播。 滑塊.component.ts

<div *ngIf="mainSlider">
    <div class="main__slider">
        <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig">
            <div ngxSlickItem *ngFor="let slide of slides" class="slide">
                <div class="main__slide">
                    <div class="main__slide-inner">
                        <img class="main__slide-image" src="/assets/img/{{slide.img}}.svg" alt="">
                        <div class="main__slide-title">
                            Lorem ipsum dolor sit amet.
                        </div>
                        <div class="main__slide-subtitle">
                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, odit?
                        </div>
                        <div class="main__slide-button">
                            <div class="main__slide-hint">
                                <img src="assets/img/sandglass.svg" alt="">Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit. Deleniti esse atque eveniet incidunt.
                            </div>
                            <img src="assets/img/icons/dotted-arrow.svg" alt="">
                            <a class="button-blue" href="#">
                                Lorem ipsum dolor sit.
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </ngx-slick-carousel>
    </div>
    <div class="main__slider-arrows">
        <button class="slick-arrow" (click)="prev()"><img src="assets/img/icons/arrow-slider.svg" alt=""></button>
        <button class="slick-arrow" style="transform: rotateY(180deg);" (click)="next()"><img
                src="assets/img/icons/arrow-slider.svg" alt=""></button>
    </div>
    <div class="main__slider-info">
        <div class="slider-index">
            <span class="current-slide">01</span>/<span class="num-slide">03</span>
        </div>
        <div class="slider-progress">
            <div class="slider-progress__back"></div>
            <span [style.width.%]="progressBarWidth"></span>
        </div>
    </div>
</div>

<div *ngIf="eventsSlider">
    <div class="news-slider-mobile">
        <ngx-slick-carousel class="carousel" #eventsModal="slick-carousel" [config]="slideConfig">
            <div class="events-slider">
                <div class="events-slider__arrows news-arrows active-arrows"></div>
                <div class="events-slider__arrows activity-arrows"></div>
                <div class="events__tabs">
                    <div class="title tab news-tab active">
                        News
                    </div>
                    <div class="switch first-on">
                        <span></span>
                    </div>
                    <div class="title tab activity-tab">
                        Events
                    </div>
                </div>
                <div class="events__tab-content">
                    <div class="news-item tab-item active-tab">
                        <div class="news-slider-mobile">
                            <a *ngFor="let banner of eventsBanners" href="#" class="events__item">
                                <div class="events__item-image">
                                    <img src="assets/img/{{ banner.img }}.png" alt="">
                                </div>
                                <div class="events__item-wrapper">
                                    <div class="date-view">
                                        <div class="date-view__date">
                                            <img src="images/icons/calendar.svg" alt="">${{banner.date}}
                                        </div>
                                        <div class="date-view__view">
                                            <img src="images/icons/eye.svg" alt="">${{banner.views}}
                                        </div>
                                    </div>
                                </div>
                                <div class="events__item-title">
                                    ${{banner.title}}
                                </div>
                                <div class="events__item-text">
                                    ${{banner.description}}
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </ngx-slick-carousel>
    </div>
</div>

如您所見，我有mainSlider和eventsSlider ，我還嘗試為每個圓滑的輪播提供個人#slickModal名稱（@ViewChild 也正在觀看自己的模式）。
滑塊.components.ts

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { SlickCarouselComponent } from 'ngx-slick-carousel';

import { eventsBanners } from './banners';

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {

  @Input() mainSlider: boolean;
  @Input() eventsSlider: boolean;

  @ViewChild('slickModal') slickModal: SlickCarouselComponent;
  @ViewChild('eventsModal') eventsModal: SlickCarouselComponent;
...

我在主頁上導入 app-slider
主頁.component.html

<section class="main">
    <div class="container">
        <div class="main__inner">
            <app-slider mainSlider="true"></app-slider>
        </div>
    </div>
</section>
<section class="events">
    <div class="container">
        <app-slider eventsSlider="true"></app-slider>
    </div>
</section>

在第一個橫幅上，我正在更改進度條的寬度，然后使 next() 函數slider.component.ts

  next() {
    console.log(this.slickModal) // gives first modal
    console.log(this.eventsModal) // gives undefined
    this.slickModal.slickNext();
  }

這是一個錯誤

類型錯誤：無法讀取未定義的屬性“slickNext”

有人可以幫忙解決這個問題嗎？ 我應該如何在同一頁面/文件上使用 2 <ngx-slick-carousel> ？

Answer 1

問題是我的第二個滑塊的 html 不正確，兩個滑塊可以工作。 據我了解在ngx-slick-carousel孩子應該有ngxSlickItem

<div *ngIf="eventsSlider">
<div class="events-slider">
    <div class="events-slider__arrows news-arrows active-arrows"></div>
    <div class="events-slider__arrows activity-arrows"></div>
    <div class="events__tabs">
        <div class="title tab news-tab active">
            news
        </div>
        <div class="switch first-on">
            <span></span>
        </div>
        <div class="title tab activity-tab">
            events
        </div>
    </div>
    <div class="events__tab-content">
        <div class="news-item tab-item active-tab">
            <div class="news-slider">
                <ngx-slick-carousel class="carousel" #eventsModal="slick-carousel" [config]="slideConfig">
                    <a ngxSlickItem *ngFor="let banner of eventsBanners" href="#" class="events__item">
                        <div class="events__item-image">
                            <img src="assets/img/{{ banner.img }}.png" alt="">
                        </div>
                        <div class="events__item-wrapper">
                            <div class="date-view">
                                <div class="date-view__date">
                                    <img src="images/icons/calendar.svg" alt="">{{banner.date}}
                                </div>
                                <div class="date-view__view">
                                    <img src="images/icons/eye.svg" alt="">{{banner.views}}
                                </div>
                            </div>
                        </div>
                        <div class="events__item-title">
                            {{banner.title}}
                        </div>
                        <div class="events__item-text">
                            {{banner.description}}
                        </div>
                    </a>
                </ngx-slick-carousel>
            </div>
        </div>
    </div>
</div>

更新 1

但我仍然無法處理 next() 函數。 函數改變了我的第一個 slick，但也給出了一個錯誤，它不能 slickNext() of undefined 。 他仍然認為他應該對兩個 modals 都使用 slickNext() ，即使我在開始時將它們分開。

next() {
    this.mainBanner.slickNext(); 
 }

  @ViewChild('slickModal') mainBanner: SlickCarouselComponent;
  @ViewChild('eventsModal') eventsModal: SlickCarouselComponent;

類型錯誤：無法讀取未定義的屬性“slickNext”