web-dev-qa-db-ja.com

エラーが発生しましたTypeError：未定義のプロパティ「emit」を読み取ることができません

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つずつ）。

angulartypescriptevent-handlingyoutube-apiemit
8
Sonu Mishra

未定義のプロパティ「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

22
basarat

これを見つけるためにここに来た人は、Basaratsソリューションが機能しない場合、イベントエミッターの上の行にタイプミスがないことを確認してください。未定義のEventEmitterの上に名前のないViewChildがありました。

0
Nick Gallimore