在MyComponent
中,我试图从事件处理程序中发出另一个事件。 (父组件将使用此新事件执行一些操作)。我创建了一个事件发射器作为MyComponent
的成员,但事件处理程序方法无法访问事件发射器。它抛出ERROR TypeError: Cannot read property 'emit' of undefined
。我在StackOverflow上发现了一些相关问题,但由于对Angular2
不熟悉而无法理解。
import { Component, Input, Output, OnChanges, SimpleChanges, OnInit, EventEmitter } from '@angular/core';
import YouTubePlayer from 'youtube-player';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnChanges, OnInit {
@Input()
videoURL = '';
player : any;
videoId : any;
@Output()
myEmitter: EventEmitter<number> = new EventEmitter();
ngOnInit(): void {
this.player = YouTubePlayer('video-player', {
videoId: this.videoId,
width: "100%"
});
this.registerEvents();
}
private registerEvents() {
this.player.on("stateChange", this.onStateChangeEvent);
}
private onStateChangeEvent(event: any) {
console.log("reached here: " + event);
this.myEmitter.emit(1); //throws `ERROR TypeError: Cannot read property 'emit' of undefined`
}
}
有人可以帮帮我吗?请注意,我必须仅从onStateChangeEvent
发出事件,因为稍后我将针对不同类型的事件使用不同类型的事件发射器。所以我会在onStateChangeEvent
内放一个switch-case,并使用不同的发射器 - 每种类型一个。
答案 0 :(得分:20)
无法读取属性&#39; emit&#39;未定义的
通常由错误this
引起
修复
private onStateChangeEvent = (event: any) => {
console.log("reached here: " + event);
this.myEmitter.emit(1); // now correct this
}
https://basarat.gitbooks.io/typescript/docs/arrow-functions.html
答案 1 :(得分:1)
对于任何来这里的人来说,如果Basarats解决方案不起作用,请检查以确保事件发射器上方的行没有任何错字。我在未定义的EventEmitter上方有一个未命名的ViewChild。