角度：EventEmitter 在嵌入式组件中未定义答案

【问题标题】：angular: EventEmitter is undefined in embedded component角度：EventEmitter 在嵌入式组件中未定义
【发布时间】：2018-12-22 23:27:41
【问题描述】：

我正在学习 Angular，但我遇到了一个问题：我在主组件中有一个组件，我想发出一个事件，但我遇到了一个错误。这是我的代码：

import { Component,  OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
  @Output() numberGenerated: EventEmitter<{v: number}> = new EventEmitter<{v: number}>();
  game: any;

  constructor() { }

  ngOnInit() {
  }

  startGame() {
    this.game = setInterval(this.generateEvent, 1000);
  }

  stopGame() {
    clearInterval(this.game);
  }

  generateEvent(): void {
    const n = Math.floor((Math.random() * 10) + 1);
    this.numberGenerated.emit({v: 3});
    console.log('event sent');
  }
}

这是该组件的 html 代码：

开始游戏结束游戏

这里是 app-rootcomponent html：

<div>
    <app-game-control (numberGenerated)="numberGeneratedEvent($event)">
    </app-game-control>
    <hr>
    <br>
</div>

但是当我点击“开始游戏”按钮时，我从所附图片中得到了错误：

请注意，这是一个窗口，而不是一个组件。我做错了什么？

【问题讨论】：

标签： javascript angular eventemitter angular-event-emitter

【解决方案1】：

试试这个：

this.game = setInterval(() => this.generateEvent(), 1000);

这似乎是不必要的额外函数调用层，但它对于维护this 上下文的方式很重要。

【讨论】：

您作为this.generateEvent 传递的函数指针不携带您的类GameControlComponent 的特定实例的上下文。当以这种方式调用函数时，函数上下文中的 this 未正确定义。
顺便问一下，我的建议解决了问题吗？
它解决了问题，但不明白为什么。现在我明白为什么了。谢谢
不用担心。没想到是你:)