使用angular封装 swiper

angular4.0发布,下面我尝试着用angular4.0对swiper常用的滑动组件进行封装

碰到的问题: vue中有$nexttick函数监控dom渲染完毕的钩子,找了半天, angular4.0居然没有.后面发现我的思维被固定了, angular的核心是去 dom操作!下面看下是如何实现的.(不过个人感觉,这种钩子加进去还是比较方便的,vue确实好用,单自由度太高,有好处也有坏处)

我第一次是这么想的,直接封装一段html代码,然后调用new Swiper()方法初始化,下面是html代码

ts代码,延迟300毫秒执行初始化-- 可用,没发现大问题,但是当数据更新时,问题就出来了,比如多加一个滑动项目

接下来继续优化,如何动态的监控slide项目,并发现数据更改时自动刷新呢?

经过苦思冥想,终于想明白了,需要将swiper-slide也就是滑动块做一下封装,然后传递是否最后一个元素,如下图

[last="isLast",传入后再组件内部进行接收,接收完毕来判断是否最后一个元素,如果是最后一个,则执行swiper.update()方法

这样每次数据变更时,都会自动更新数据,妈妈在用不用担心忘记更新swiper了,用的时候也可以放心使用,数个组件组成一个功能完整的大组件,使用起来很方便!

封装提炼--当有判断dom 渲染完毕场景下使用

import{Component,EventEmitter,Input,OnInit,Output}from'@angular/core';

@Component({

selector:'[meepo-last]'

})

export classIndexFooterMenuItemComponentimplementsOnInit {

@Input() last: boolean;

@Output() next:EventEmitter = newEventEmitter()

constructor() {}

ngOnInit() {

if(this.last){

this.next.emit('last')

}

}

}

使用 angular心得: 如果你要实现某个功能,必须将这个功能的最小单元封装成 angular组件,从这个例子中可以看出,组件是 angular的核心功能!

项目地址: https://github.com/meepobrother/angular-swiper