I'm binding an scroll event to capture the scroll and do something with it, I've created a directive like bellow :
So I have simple directive which has nothing but :
constructor ( private el : ElementRef ,
private renderer : Renderer ) {
this.domAdapter = new browser.BrowserDomAdapter();
this.ruler = new Ruler( this.domAdapter );
}
ngAfterViewInit () : any {
this.renderer.listenGlobal( 'window' , 'scroll' , ()=> {
console.log( 'scrolling' );
} );
return undefined;
}
This is working fine , expect that I can see that it fires a change detection on scroll in all of my application.
This is inside one of my components :
private aFunction () {
console.log( 'change detected !!!' );
}
I have aFunction
in a template somewhere in some component :
<div>{{ aFunction() }}</div>
Previously, aFunction
was getting fired off, only if I updated some input or clicked on a button , but now , it's getting that change detection on scroll!!!
So my scrolling experience is laggy because of this !.
This is the normal behavior of Angular2 , all the events should fire change Detection , but I want to exclude my scroll event from this rule .
In a nutshell , how to define a event in Angular2 and turn of it's ability to fire change detection and make it manual.
I'm looking for :
this.renderer.listenGlobalButDontFireTheChangeDetection
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…