Wie erhält man den Wert von "this" Schlüsselwort in Scroll Event Listener des Fensters in Angular2?

Question

Ich habe eine Funktion in meiner Komponente Klasse, wo ich Scroll Event Listener anhängen. Ich tue dies:

private _scrollListener(event){ 
    console.log("inside the scroll listener; this: ",this); 
    this._zone.run(() => { 
     this.checkForLazyLoad = !this.checkForLazyLoad; 
    }) 
} 

ngOnInit() { 
    window.addEventListener("scroll", this._scrollListener); 
} 

Problem ist, dass der Wert von „this“ Schlüsselwort in der privaten Funktion „_scrollListener“ zeigt auf Fensterobjekt. Wie würde ich den Wert der Instanz meiner Klasse im Scroll-Ereignis-Listener erhalten?

Answer 1

ngOnInit() { 
    window.addEventListener("scroll", this._scrollListener.bind(this); 
} 

oder wahrscheinlich eine bessere Lösung

@HostListener('window:scroll', ['$event']) 
private _scrollListener(event){ 
    console.log("inside the scroll listener; this: ",this); 
    this._zone.run(() => { 
     this.checkForLazyLoad = !this.checkForLazyLoad; 
    }) 
} 

diese Weise können Sie das Ereignis imperativ nicht deregistrieren können, aber es ist automatisch nicht registriert, wenn die Komponente entfernt wird.

Answer 2

würde ich folgendes verwenden:

private _scrollListener(event){ 
    console.log("inside the scroll listener; this: ",this); 
    this._zone.run(() => { 
    this.checkForLazyLoad = !this.checkForLazyLoad; 
    }) 
} 

ngOnInit() { 
    window.addEventListener("scroll", (event) => { 
    this._scrollListener(event); 
    }); 
} 

Es ist, weil Sie die Funktion verweisen, so dass Sie es Ausführungskontext (das heißt die Komponente selbst) verlieren. Auf diese Weise behalten Sie das Schlüsselwort this bei.

Seien Sie vorsichtig mit dem bind Methode mit Typoskript:

• https://basarat.gitbooks.io/typescript/content/docs/tips/bind.html