javascript - 关于 Angular 2 中发出的事件的一些疑问。这个示例到底是如何工作的？

Question

我是 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 ，但我绝对不确定。

它到底是如何工作的？

Answer 1

您应该使用 @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