如何在角度上使用Swiperjs？

Question

我知道有一个模块，但我想通过它的CDN在我的角度应用程序中使用Swiper。

我在head of my index.html中包含了这些脚本。

然后，在我想要使用它的组件中，我已经将其作为如下内容进行了删除：

​

  import { Component, OnInit } from '@angular/core';
import { MenuService } from '../_services/menu.service';
import { ContentfulService } from '../_services/contentful.service';
import { Entry } from 'contentful';
declare let Swiper: any;

/* and initialised in the constructor*/

  constructor(
    public menu: MenuService,
    private contentfulService: ContentfulService
  ) {
    new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'vertical',
      loop: true,
    });
  }

​

我没有收到任何错误，但它根本不起作用。例如，箭头也被加载，但是没有绑定到它们的事件。任何帮助都是非常感谢的。

Answer 1

只需更改index.html https://stackblitz.com/edit/angular-d21ywf中的脚本和css链接即可。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>

然后带着你的酒杯

import { Component ,AfterViewInit} from '@angular/core';
declare let Swiper: any;


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements AfterViewInit {
  name = 'Angular';

  constructor() {

  }
  ngAfterViewInit() {
    new Swiper('.swiper-container', {
       pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        autoplay: 3000,
        spaceBetween: 30,
        direction: 'vertical',
        loop: true
    });
  }
}