angular4.0發(fā)布,下面我嘗試著用angular4.0對(duì)swiper常用的滑動(dòng)組件進(jìn)行封裝
碰到的問題: vue中有$nexttick函數(shù)監(jiān)控dom渲染完畢的鉤子,找了半天, angular4.0居然沒有.后面發(fā)現(xiàn)我的思維被固定了, angular的核心是去 dom操作!下面看下是如何實(shí)現(xiàn)的.(不過個(gè)人感覺,這種鉤子加進(jìn)去還是比較方便的,vue確實(shí)好用,單自由度太高,有好處也有壞處)
我第一次是這么想的,直接封裝一段html代碼,然后調(diào)用new Swiper()方法初始化,下面是html代碼
ts代碼,延遲300毫秒執(zhí)行初始化-- 可用,沒發(fā)現(xiàn)大問題,但是當(dāng)數(shù)據(jù)更新時(shí),問題就出來了,比如多加一個(gè)滑動(dòng)項(xiàng)目
接下來繼續(xù)優(yōu)化,如何動(dòng)態(tài)的監(jiān)控slide項(xiàng)目,并發(fā)現(xiàn)數(shù)據(jù)更改時(shí)自動(dòng)刷新呢?
經(jīng)過苦思冥想,終于想明白了,需要將swiper-slide也就是滑動(dòng)塊做一下封裝,然后傳遞是否最后一個(gè)元素,如下圖
[last="isLast",傳入后再組件內(nèi)部進(jìn)行接收,接收完畢來判斷是否最后一個(gè)元素,如果是最后一個(gè),則執(zhí)行swiper.update()方法
這樣每次數(shù)據(jù)變更時(shí),都會(huì)自動(dòng)更新數(shù)據(jù),媽媽在用不用擔(dān)心忘記更新swiper了,用的時(shí)候也可以放心使用,數(shù)個(gè)組件組成一個(gè)功能完整的大組件,使用起來很方便!
封裝提煉--當(dāng)有判斷dom 渲染完畢場(chǎng)景下使用
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心得: 如果你要實(shí)現(xiàn)某個(gè)功能,必須將這個(gè)功能的最小單元封裝成 angular組件,從這個(gè)例子中可以看出,組件是 angular的核心功能!
項(xiàng)目地址: https://github.com/meepobrother/angular-swiper
