我是 Angular 2 的绝对初学者,我对这个与框架如何发出事件有关的示例到底如何工作有一些疑问(我正在学习教程)。
所以我有以下情况:
主要组件是app-root并包含以下 View :
<div class="container">
<div class="row">
<div class="col-xs-12">
<app-game-control></app-game-control>
</div>
</div>
</div>
如您所见,其中包括 <app-game-control></app-game-control>
子组件。它的 View 仅显示我的单页应用程序中的 2 个按钮,这些按钮:
<button
class="btn btn-success"
(click)="onStartGame()"
>Start Game</button>
<button class="btn btn-danger">Pause Game</button>
点击第一个,调用相关子组件 Controller 方法onStartGame(),这是该 Controller 的完整代码:
import {Component, EventEmitter, OnInit} from '@angular/core';
@Component({
selector: 'app-game-control',
templateUrl: './game-control.component.html',
styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
intervalFired = new EventEmitter<number>();
interval;
lastNumber = 0;
constructor() { }
ngOnInit() {
}
onStartGame() {
this.interval = setInterval(() => {
this.intervalFired.emit(this.lastNumber + 1);
this.lastNumber ++;
}, 10000);
}
}
在这里,我对单击按钮时到底会发生什么有一些疑问。
根据我的理解,事件只是一个可以发出的对象,在本例中它应该是包含单个数字字段的对象:
intervalFired = new EventEmitter<number>();
这种对事件的解释正确还是我遗漏了什么?
当用户单击按钮时,将执行onStartGame()。此方法应该发出事件(对其值进行简单计算)。
但是发出事件到底意味着什么?谁是此发出事件的接收者?我认为它应该是父组件 Controller ,但我绝对不确定。
它到底是如何工作的?
最佳答案
您应该使用 @Output()
从组件发出事件。
注:@Output() intervalFired = new EventEmitter<number>();
应该是要发出的事件。
您可以在根组件中处理该事件,如下所示,
<div class="col-xs-12">
<app-game-control (intervalFired)="intervalFired($event)" ></app-game-control>
</div>
typescript 代码
intervalFired(e){
this.lastNumber = e;
console.log(e)
}
<强> LIVE DEMO
关于javascript - 关于 Angular 2 中发出的事件的一些疑问。这个示例到底是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44608079/