刷卡器在Angular 5中不起作用

Question

刷卡器在Angular 5中不起作用

我正在尝试将nolimts4web swiper集成到我在index.html文件中使用的Angular 5项目中

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

Run Code Online (Sandbox Code Playgroud)

将其放在我的HTML文件中：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

并通过将其放在body标签末尾之前进行初始化index.html：

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
 </script>

Run Code Online (Sandbox Code Playgroud)

发生的是它slide 1在滑动器中显示，但是单击“下一步”按钮没有任何作用，我也无法滑动，基本上操作无效。

Answer 1

Yan*_*git 5

请使用此库以避免Swiper在加载html之前进行初始化。

----更新1 ----

在我看来，您的问题与HTML的生命周期有关，这意味着Swiper会在浏览器加载/解释html之前初始化。为避免此问题，您可以使用链接库或仅创建外观如下的组件：

// Don't forget to declare Global variable related to Swiper.
declare var Swiper: any;

@Component({
  selector: 'swiper',
  template: `
<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>
</div>
`
})
export class SwiperComponent implements AfterViewInit {
    constructor(
        private elementRef: ElementRef
    ) {}

    //[...]

    ngAfterViewInit() {
        /**
         * - Here you are 100% sure, html is present on DOM, Swiper is initialize and is able to find your DOM element.
         * - Swiper constructor accept DOMElement as parameter, i recommand this approch to optimize DOM parsing.
         * - Because you store Swiper instance as attribute, you will be able to control Swiper by javascript. 
        **/
        this.swiper = new Swiper(this.elementRef.nativeElement.querySelector('.swiper-container'), {
            //Here you can provide Swiper config
        });
    }
}

Run Code Online (Sandbox Code Playgroud)

在线样本

归档时间：	7 年，9 月前
查看次数：	6963 次
最近记录：	6 年，8 月前