鍍金池/ 問答/HTML5  測試  網絡安全  HTML/ angular里使用iscroll時如何refresh?

angular里使用iscroll時如何refresh?

Angular的項目，引入了iscroll，d.ts文件也寫好了，可以初始化沒問題，但是當組件更新時，需要調用IScroll.refresh()，根據以往用其他MVVM框架的經驗，直接在視圖更新完畢的生命周期方法里調用IScroll.refresh()就行了：

import * as IScroll from 'iscroll'

export class Model_1{
    scroll : IScroll
    scroll_option = {click:true} as IScroll.IScrollOptions
    constructor(){   }
    ngAfterViewInit(){
        this.scroll = new IScroll(".scroll-wrapper",this.scroll_option)
    }
    ngAfterViewChecked(){
        this.scroll.refresh()
        console.log(123)
    }
    //....
 }

但此時問題出現了，iscroll加載后在滑動時會無限次觸發(fā)ngAfterViewChecked()(控制臺不斷打印出123)，導致視圖無法正確刷新，請問有遇到過這種問題嗎，是如何解決的呢？

回答
編輯回答
慢半拍

ngAfterViewChecked這個hook每次在檢測組件內部自己的視圖(view)和子組件的視圖時都會調用，頻率很高的。官網也說明了:

Notice that Angular frequently calls AfterViewChecked(), often when there are no changes of interest. Write lean hook methods to avoid performance problems.

你說的那個庫沒有使用過，不過refresh這種刷新邏輯一般不會頻繁的觸發(fā)吧，那只需要在需要觸發(fā)的時候收到調用就可以了呀，沒有必要寫到ngAfterViewChecked 生命周期函數中吧

2017年8月5日 12:21
編輯回答
熟稔

與react,vue不同，angular的 ngAfterViewChecked()鉤子會在視圖發(fā)生任意重繪時觸發(fā)，并不是像其他框架觸發(fā)了render才有回調，解決方案是將重載iscroll的方法直接放置于ngAfterViewInit()中：

scrollRefresh(){
    setTimeout(()=>{
        this.scroll && this.scroll.refresh()
    },130)
}
ngAfterViewInit(){
    this.scroll = new IScroll(".scroll-wrapper", this.scroll_option)
    this.scrollRefresh()
}
2017年6月25日 12:58