Angular4.x+Swiper3制作公告栏和轮播图（引用第三方库）

话不多说，先看一下效果：

上方的轮播图是循环轮播，可以通过手动来控制，而下方的公告栏则无法通过手动控制。一个界面出现两个Swiper组件的需求。

数据来源：图片URL和公告内容都是通过*ngFor命令来读取ts文件中的数据然后渲染出来的，此处需要注意的是，*ngFor的页面渲染和Swiper新建时候的先后顺序，如果顺序错误，则无法出现自动滚动的效果。

第一步：angular4.x工程引用外部js和css文件。（此处使用的是Swpier3）首先在官网下载Swiper3的js和css文件下载资源

我们将下载好的swiper文件放置到assets文件夹下面的css文件和javaScript文件中：

然后在WebStrom编译器的命令行中输入如下命令：

npm install @types/swiper --save       --生产环境

npm install @types/swiper --save-dev     --开发环境

因为ts文件不能准确的识别js的语法，所以需要用ts中的interface接口，将js转化为ts并且暴露出来。

接下来在跟补录的index.html文件中引用这两个文件：

<link href="assets/css/swiper.css" type="text/css" rel="stylesheet">

<script src="assets/javascript/swiper.min.js" type="text/javascript"  charset="UTF-8"></script>

然后要做的就是申明全局的Swiper对象，因为后面在ts文件中需要用到：

在typings.d.ts文件中申明

接下来要做的就是撸代码了，不多说了，我直接把这两个组件的js  css  html文件拿上来：

 <!--轮播图-->
  <div class="swiper-container swiper-banner">
    <div class="swiper-wrapper">

      <div class="swiper-slide swiper-item-img" *ngFor="let img of imgs">
          <img class="swiper-img" src="{{img.Url}}">
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!--滚动抢单提示-->
  <div class="massage-flex-div">
    <img class="logo-56" src="./assets/image/icon_rad_nor.png">
    <div class="swiper-container swiper-message">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-no-swiping swiper-item-text" *ngFor="let arr of messageArray">{{arr.message}}</div>
      </div>
    </div>
  </div>

//新的轮播效果样式

.swiper-banner {
  height: 14vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.4vh;
  margin-bottom: 1.8vh;
}
.swiper-slide {
  //text-align: center;
  //font-size: 18px;
  //background: #f60c33;

  /* 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;
}

.swiper-img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.swiper-item-img{
  padding-left: 4.17vw;
  padding-right: 4.17vw;
}

.swiper-div{
  width: 100%;
  height: 100%;
  padding-left: 4.17vw;
  padding-right: 4.17vw;
  border-radius: 15px;
  background-color: #f60c33;
}

.swiper-message{
  width: 100%;
  height: 22px;
  overflow: hidden;
}

.swiper-item{
  width: 100%;
  height: 100%;
  border-radius: 15px;
  overflow: hidden;
}

.swiper-item-text{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 4.17vw;
  font-size: 2.18vh;
  color: #666666;
}

最后的js需要说明一下，在angular4.x的生命周期中，我没有放在ngOnInit里面，因为这样就会先注册组件而后渲染，导致失去滑动效果，所以我选择的生命周期函数是ngAfterViewInit函数：

ngAfterViewInit(){
    this.initView();
  }

  public initView(){

    var swiper = new Swiper('.swiper-banner', {
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      paginationClickable: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: 2500,
      autoplayDisableOnInteraction: false,
      loop: true,
    });

    var swiper1 = new Swiper('.swiper-message', {
      pagination: '.swiper-pagination',
      spaceBetween: 5,
      centeredSlides: true,
      autoplay: 3500,
      autoplayDisableOnInteraction: false,
      loop: true,
      direction: 'vertical'
    });
  }

其他的样式自己定义，数据自己造，至于如何使用*ngFor大家可以去看angular4.x的Api。