Angular 2 - Wie wird eine Typoskriptfunktion innerhalb einer addEventListener-Handlerfunktion aufgerufen?

Question

Ich versuche, eine andere Typoskript-Funktion (jeder Art) innerhalb einer Handler-Funktion aufzurufen, die zu Spannen auf einer Seite hinzugefügt wurde. Wenn ich dies tue, funktioniert die Handler-Funktion gut und wird grundlegende Dinge wie set Variablen, console.log usw. tun. Wenn Sie jedoch versuchen, eine Funktion jeder Art aufzurufen, wird ein Fehler von 'Kann Eigenschaft nicht lesen Funktion von nicht definiert ". So zum Beispiel, hier ist der Code, das funktioniert:

addListenter() { 
if (!this.addListenerFired) { 
    let iterateEl = this.el.nativeElement.querySelectorAll('span'); 
    for (let i = 0; i < iterateEl.length; i++) { 
    iterateEl[i].addEventListener('click', this.showExcerptInfo); 
    } 
    this.addListenerFired = true; 
} 
showExcerptInfo(): void { 
    this.selectedExcerptId = event.srcElement.id; 
    console.log(this.selectedExcerptId); 
} 

Wenn ich jedoch die Handler-Funktion ändern Sie die folgende (überall oder rufen Sie eine beliebige Funktion befindet, auch in der gleichen Komponente) zu tun, es wird nicht funktionieren und wirft die Fehler:

showExcerptInfo() { 
    let excerpt = this.excerptsService.getExcerpt(this.selectedExcerptId); 
} 

Irgendwelche Hinweise, warum dies passiert und/oder wie es gelöst werden kann?

Answer 1

Sie müssen darauf achten, dass this in der aktuellen Instanz der Klasse zeigt hält:

iterateEl[i].addEventListener('click', this.showExcerptInfo.bind(this)); 

alternativ Sie

iterateEl[i].addEventListener('click', (evt) => this.showExcerptInfo(evt)); 

Answer 2

this nicht der auf Ihre Klasse verwenden können. gibt es mehr 2 Möglichkeiten, es zu tun mit 'this' ohne 'binden' zu halten:

iterateEl[i].addEventListener('click', (event) => this.showExcerptInfo(event)); 

oder:

iterateEl[i].addEventListener('click', this.showExcerptInfo); 

showExcerptInfo: (any) => void = (event:any):void => { 
    this.selectedExcerptId = event.srcElement.id; 
    console.log(this.selectedExcerptId); 
}