angula2 轮播效果组件angular2-swiper

github地址：https://github.com/ksachdeva/angular2-swiper

 

 一、安装

npm install swiper angular2-swiper --save-dev

 

二、配置

1、angular-cli.json

"styles": [
     "../node_modules/swiper/dist/css/swiper.css"
],

按理说这样写是可以获取到样式的，但是在我本地的项目死活获取不到，我就直接把样式文件拷贝到assets文件夹下，然后在index.html里面直接引用<link rel="stylesheet" href="/assets/css/swiper.css">

2、模块module.ts文件

import {KSSwiperModule} from "angular2-swiper";
 
imports: [
    KSSwiperModule
  ],

 重新运行cnpm start的时候，可能会报错：ERROR in KKSwiperModule is not an Ngmodule；跟着错误来到ks-swiper.module.d.ts文件，给他添加一个ngModule如下即可：

import { NgModule } from "@angular/core"；

@NgModule()
export declare class KSSwiperModule {
}

 

三、使用

1、html文件

  <div  class="top-box" *ngIf="dataFlag == 'true'">
    <div class="top-list" > 
      <ks-swiper-container [options]="swipeOptions">
        <ks-swiper-slide *ngFor="let rowData of tradeTop" class="top-book"> 
            <img src="{{rowData.goods_cover_path}}">
            <span>已售{{rowData.total_count}}本</span> 
            <p>{{rowData.goods_name}}</p> 
        </ks-swiper-slide>
      </ks-swiper-container>
    </div>
  </div> 
  <button class="left-active" [class.show]="preNextBtnFlag == 'true'"> </button>
  <button class="right-active"  [class.show]="preNextBtnFlag == 'true'"> </button> 

2、组件component.ts文件

import { KSSwiperContainer, KSSwiperSlide } from 'angular2-swiper';

const pageLinkSize = 6;

@Component({
  selector: 'tl-top',
  templateUrl: './top.component.html',
  styleUrls: ['./top.component.css']
})
export class TopComponent implements OnInit {

  @Input() tradeTop;

  public preNextBtnFlag: string = 'false';
  public dataFlag: string = 'false';
  public swipeOptions: any;

  constructor() { }

  ngOnInit() {
    this.swiperFn();
  }
　　
  ngOnChanges(changes) {
    let tradeTopArr = changes['tradeTop'] && changes['tradeTop']['currentValue'];  // tradeTop为后台获取的数据 
    if (tradeTopArr) {
      let tradeTopArrLen = tradeTopArr.length;
      this.dataFlag = 'true'; 
      this.swiperFn();
      if ( tradeTopArrLen < 7) { 
        this.preNextBtnFlag = 'false';
      } else if (tradeTopArrLen >= 7) {
        this.preNextBtnFlag = 'true'; 
      }
    }
  }

  // 轮播配置
  swiperFn() {
    this.swipeOptions = {
      slidesPerView: 6,
      nextButton: '.right-active',
      prevButton: '.left-active',
      spaceBetween: 40
    };
  }

 

 

（本文原创，转载请注明出处！！）