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
の中にスイッチケースを入れ、異なるエミッターを使用します(各タイプに1つずつ)。
未定義のプロパティ「emit」を読み取れません
間違った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
これを見つけるためにここに来た人は、Basaratsソリューションが機能しない場合、イベントエミッターの上の行にタイプミスがないことを確認してください。未定義のEventEmitterの上に名前のないViewChildがありました。