angular里使用iscroll时如何refresh?

Question

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加载后在滑动时会无限次触发ngAfterViewChecked()(控制台不断打印出123)，导致视图无法正确刷新，请问有遇到过这种问题吗，是如何解决的呢？

Answer 1

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这种刷新逻辑一般不会频繁的触发吧，那只需要在需要触发的时候收到调用就可以了呀，没有必要写到ngAfterViewChecked 生命周期函数中吧

Answer 2

与react,vue不同，angular的 ngAfterViewChecked()钩子会在视图发生任意重绘时触发，并不是像其他框架触发了render才有回调，解决方案是将重载iscroll的方法直接放置于ngAfterViewInit()中：scrollRefresh(){    setTimeout(()=>{        this.scroll && this.scroll.refresh()    },130)}ngAfterViewInit(){    this.scroll = new IScroll(".scroll-wrapper", this.scroll_option)    this.scrollRefresh()}