angular6 集成swiper， 并将swiper封装成公共组件

1. angular 引入 swiper

在引入swiper时，我首次是使用npm安装的，但是总是报swiper未定义， 在网上找的教程也没用，只好直接将swiper下载下来，直接将js, css文件引入到angular.json文件中：

2. 将swiper封装成组件， 新建一个swiper-slide compontent

html 代码

<div class="swiper-container">

  <div class="swiper-wrapper">
    <ng-content></ng-content>
  </div>

</div>

ts 代码

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

@Component({
  selector: 'app-swiper-slide',
  templateUrl: './swiper-slide.component.html',
  styleUrls: ['./swiper-slide.component.css']
})
export class SwiperSlideComponent implements OnInit, AfterViewInit {
  mySwiper: any;

  constructor() { }

  ngOnInit() {
    setTimeout(() => {
      this.initSwiper();
    }, 20);
  }

  ngAfterViewInit() {

  }

  initSwiper() {
    this.mySwiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      freeMode: true,
      observer:true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents:true,//修改swiper的父元素时，自动初始化swiper

    });
  }



}

使用：

<app-swiper-slide >
    // self-slide 的内容是width:auto; heigth: auto; 因为我发现它滑动块的width， heigth 都是100%; 设置slidesPerView: 'auto'; 也没啥用
    <div class="swiper-slide self-slide"  >
      // 滑动块内的内容
      </div>
  </app-swiper-slide>

注： 这只是一个简单的封装，没有加

<!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>

如果需要加上就ok。
最后，这个封装并不是很理想，跟我想要的不太一样，如果有更好的封装方法，请留言指导， 不胜感激。