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

Question

我正在使用斯威珀 v6.6.1在我的角度12应用程序中创建一个滑块。

这是我的角组件

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 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链路中的演示。

您有两种工作方式，第一种方式是R.Richards建议的。第二种方法是使用template-ref。首先，需要将模板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;

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

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

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