Angular(移动端)中使用轮播插件swiper4

项目使用的Angular7.0和swiper4

1.安装Swiper：

（自己使用cnpm命令安装竟然在node_modules文件夹下找不到swiper,使用npm命令则可以,这是why?）
npm install swiper --save

在angular.json文件添加swiper.js和swiper.css

"architect": {
	    ...............
	    
	    "styles": [
	         "src/styles.css",
	         "./node_modules/swiper/dist/css/swiper.min.css"
	     ],
	     "scripts": [
	         "./node_modules/swiper/dist/js/swiper.min.js"
	     ]
	     
		....................
}

3.安装模组定义档：

npm install @types/swiper --save

 然后再配置tsconfig文件：
 
		"typeRoots": [
		  //加上下面这句话
	      "node_modules/@types"
	    ]

4.配置tsconfig.app.json文件：

    "types": [
		//加上swiper
		"swiper"
     ]

5.slider.component.ts

import {
	// 需导入AfterViewInit
    AfterViewInit,
    Component,
    OnInit
} from '@angular/core';

// 引入swiper
declare var Swiper:any;

@Component({
    selector: 'app-test',
    templateUrl: './test.component.html
'})

export class TestComponent implements AfterViewInit {    
 	slider;
	constructor() {}
	// swiper在 ngOnInit声明里初始化可能会报错，所以在ngAfterViewInit声明周期里初始化
    ngAfterViewInit() {
        this.slider = new Swiper('.swiper-container', {
           	  autoplay: {
              		delay: 4500,
               		disableOnInteraction: false,
              },
              speed: 1000,
              direction: 'horizontal',
              loop: true,
              // 分页器
              pagination: {
                el: '.swiper-pagination',
              }
            // 前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        });
    }

}

6.按照上面的配置完成后，angular里就可以用swiper。

homecomponent.ts文件：

import { Component, AfterViewInit,OnInit } from '@angular/core';
declare var Swiper:any;
@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements AfterViewInit {
   
        title = 'ng-router';
        slider;
 
        constructor() {}
        ngOnInit(){}
        ngAfterViewInit() {
	              this.slider = new Swiper('.swiper-container', {
	                  autoplay: {
	                    delay: 4500,
	                    disableOnInteraction: false,
	                  },
	                  speed: 1000,
	                  direction: 'horizontal',
	                  loop: true,
	                  // 如果需要分页器
	                  pagination: {
	                    el: '.swiper-pagination',
	                  }
	              });
     	 }
        
      
      }

homecomponent.html文件：

<header>首页</header>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>

homecomponent.css文件：

header {
  width: 100%;
  height: 65px;
  line-height: 65px;
  background: #333;
  text-align: center;

}

html,
body {
  position: relative;
  height: 100%;
}

.swiper-container {
  width: 100%;
  height: 40vh;;
  border: 1px solid red;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}