抛出ERROR TypeError:无法读取未定义的属性'emit'

时间:2017-07-24 03:23:23

标签: angular typescript event-handling youtube-api 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内放一个switch-case,并使用不同的发射器 - 每种类型一个。

2 个答案:

答案 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。