无法使用 Angular 在 SwiperJs 中访问虚拟幻灯片方法

Question

我正在使用 SwiperJs v6.6.1 在我的 Angular 12 应用程序中创建一个滑块。

这是我的 Angular 组件

import SwiperCore, {
  Pagination,
  Navigation,
  EffectCoverflow,
} from 'swiper/core';
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { SwiperComponent } from 'swiper/angular';

SwiperCore.use([Pagination, Navigation, EffectCoverflow]);

declare var $: any;
@Component({
  selector: 'app-eg-image',
  templateUrl: './eg-image.component.html',
  styleUrls: ['./eg-image.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class EgImageComponent implements OnInit {
  @ViewChild('swiperRef', { static: false }) sliderRef?: SwiperComponent;

  public thumbsSwiper: any;
  public swiper: any;
  public slides = [
    'https://swiperjs.com/demos/images/nature-10.jpg',
    'https://swiperjs.com/demos/images/nature-2.jpg',
    'https://swiperjs.com/demos/images/nature-3.jpg',
    'https://swiperjs.com/demos/images/nature-4.jpg',
    'https://swiperjs.com/demos/images/nature-5.jpg',
    'https://swiperjs.com/demos/images/nature-6.jpg',
    'https://swiperjs.com/demos/images/nature-7.jpg',
    'https://swiperjs.com/demos/images/nature-8.jpg',
  ];
  public activeImage: any = this.slides[0];

  ngOnInit() {
    this.swiper = {
      autoHeight: 'true',
      effect: 'coverflow',
      spaceBetween: 50,
      grabCursor: 'true',
      centeredSlides: 'true',
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
      },
      pagination: {
        dynamicBullets: true,
        el: '.swiper-pagination',
        type: 'fraction',
      },
      navigation: true,
    };

    $('#bg-image').css(
      'background-image',
      'url(https://swiperjs.com/demos/images/nature-10.jpg)'
    );
  }

  onSlideChange(event: any) {
    this.activeImage = this.slides[event.realIndex];
    $('#bg-image').css('background-image', 'url(' + this.activeImage + ')');
  }

  onSlideEnd(event: any) {
    console.log('onSlideEnd', event);
    this.appendSlides();
  }

  appendSlides() {
    this.sliderRef!.swiperRef.appendSlide([
      `<div class="swiper-slide"><img class="swiper-slide1" src="${this.slides[0]}" /></div>`,
    ]);
  }

  setThumbsSwiper(swiper: any) {
    this.thumbsSwiper = swiper;
  }
}

这是我的 HTML 代码，

<div class="swiper-container">
  <div id="bg-image"></div>
  <div class="swiper-wrapper">
    <swiper
      [config]="swiper"
      (slideChange)="onSlideChange($event)"
      (reachEnd)="onSlideEnd($event)"
      class="mySwiper"
    >
      <ng-template swiperSlide *ngFor="let img of slides">
        <img class="swiper-slide1" data-src="{{ img }}" />
        <!-- <div class="swiper-lazy-preloader"></div> -->
      </ng-template>
    </swiper>
  </div>

  <div class="swiper-pagination"></div>
</div>

我正在尝试通过在到达最后一张幻灯片后添加新幻灯片来更新滑块，但 appendSlides() 方法没有更新滑块。

我也尝试更新 slides 数组

appendSlides() {
    this.slides.push('https://swiperjs.com/demos/images/nature-8.jpg')
}

但它不起作用。有人可以指出我正确的方向吗？

我正在关注此处提供的文档：

1. https://swiperjs.com/swiper-api#virtual-slides
2. https://swiperjs.com/angular#virtual-slides
3. https://swiperjs.com/demos#virtual-slides

这是 Stackblitz 网址：

https://stackblitz.com/edit/angular-ivy-52d8kq?file=src/app/app.component.ts

Answer 1

您应该替换 slides 数组而不是推送另一个条目。像这样：

constructor(private cd: ChangeDetectorRef) {}

appendSlides() {
    this.slides = [...this.slides, 'https://swiperjs.com/demos/images/nature-2.jpg'];
    this.cd.detectChanges();
}

完全替换阵列将触发更改检测。

Answer 2

这个StackBlitz Link的演示。

您有两种工作方式 第一种方式是 R.Richards 所建议的。第二种方法是使用template-ref。首先，您需要像这样将模板引用声明为 html

<swiper #swiperRef [config]="swiper" (slideChange)="onSlideChange($event)" (reachEnd)="onSlideEnd($event)"
  class="mySwiper">
  <ng-template #slidesArray swiperSlide *ngFor="let img of slides">
    <img class="swiper-slide1" data-src="{{ img }}" />
  </ng-template>
</swiper>

上面，代码#swipeRef 是模板引用变量，现在，您可以使用@ViewChild() 像下面的代码一样使用组件访问它..

@ViewChild('swiperRef') sliderRef?: SwiperComponent;

现在，当幻灯片到达末尾时，您需要使用此 sliderRef 变量调用 swiper js 的 appendSlide() 方法。代码如下..

  onSlideEnd(event: any) {
this.sliderRef.swiperRef.appendSlide([
  `<div class="swiper-slide"><img class="swiper-slide1" src="${
    this.slides[0]
  }" /></div>`
]);
}

现在，您可以看到它的工作情况并在最后添加新幻灯片。