初始化刷卡器

Question

我在进行了一些 API 调用后尝试初始化我的 Swiper 容器。但是，当我这样做时，出现错误：

Property 'swiper' does not exist on type Element.

这里是 link 给 Swiper API 的消息：Swiperjs

ngOnInit() {
  this.spinner.show().then( async () => {
    this.data.currentProgress.subscribe(progress => this.progress = progress);
    await this.eventService.fetchEvents();
    }).then(async () => {
      const mySwiper = document.querySelector('.swiper-container').swiper;
      mySwiper.init();
    }).then(() => {
      this.spinner.hide();
    });
}

Answer 1

而不是

const mySwiper = document.querySelector('.swiper-container').swiper;

你应该试试这个：

var mySwiper = new Swiper('.swiper-container', {
   speed: 400,
   spaceBetween: 100
});

这将初始化您的刷卡器。

问题 2：在 index.html 中添加：

<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">

<script src="https://unpkg.com/swiper/js/swiper.js"></script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
...

你有很多可能包括这个。参见 https://swiperjs.com/get-started/

初始化刷卡器

Initialize swiper

swiper

angular