javascript - 角度:EventEmitter 在嵌入式组件中未定义
问题描述
我正在学习角度,但我遇到了一个问题:我在主组件中有一个组件,我想发出一个事件,但我遇到了一个错误。这是我的代码:
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>
请注意,这是一个窗口,而不是一个组件。我做错了什么?
解决方案
试试这个:
this.game = setInterval(() => this.generateEvent(), 1000);
这似乎是不必要的额外函数调用层,但它对于this
维护上下文的方式很重要。
推荐阅读
- mysql - Amazon AWS RDS MySQL 角色权限未级联
- kotlin - 列表的 LiveData 通知观察者而不调用 setValue 或 postValue
- csv - 如何使用 jmeter 从 CSV 文件中顺序读取数据发送请求
- scala - 如何在光滑表之间抽象列定义?
- spring-boot - 将邮递员与 gitlab(newman) 集成
- angular - 将@ViewChildren/@ContentChildren 与路由器插座结合使用
- python - 文件包含\u00c2\u00a0,转换为字符
- python-3.x - Python 3.7 - 导入 sharepy 失败
- reactjs - Github 页面上 React.js 网站的基本 URL
- python - 如何使用字典中的值创建循环函数?