无法使用 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')
}

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

我正在按照此处提供的文档进行操作：

这是 Stackblitz URL:

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 变量调用 appendSlide() swiper js 的方法。代码如下所示..

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

现在，您可以看到它正在运行并在最后添加新幻灯片。

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

Can not access Virtual Slide methods in SwiperJs using Angular

angular

swiper

swiper.js