初始化刷卡器答案

【问题标题】：Initialize swiper初始化刷卡器
【发布时间】：2020-05-20 03:57:40
【问题描述】：

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

元素类型上不存在属性“swiper”。

这里是 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();
    });
}

【问题讨论】：

标签： angular swiper

【解决方案1】：

代替

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

你应该试试这个：

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

这将初始化你的 swiper。

问题 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/

【讨论】：

如何导入 Swiper？
我将它导入到 .component.ts 文件中。我试过import { SwiperModule, SwiperConfigInterface } from 'ngx-swiper-wrapper';我如何从 Swipermodule 实例化 Swiper