关于 Angular 中发出的事件的一些疑问 2. 这个例子究竟是如何工作的？

Question

我是 Angular 2 的绝对初学者，我对这个示例与框架如何发出事件有关的确切工作原理有一些疑问（我是按照教程）。

所以我有以下情况：

主要组件是 app-root 并包含此视图：

<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> 子组件。它的视图只在我的单页应用程序中显示 2 个按钮，这些：

<button
  class="btn btn-success"
  (click)="onStartGame()"
>Start Game</button>

<button class="btn btn-danger">Pause Game</button>

点击第一个调用相关子组件控制器方法onStartGame()，这是这个控制器的全部代码：

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()。此方法应发出事件（对其值进行简单计算）。

但是发出事件究竟意味着什么？谁是这个发出的事件的接收者？我认为它应该是父组件控制器，但我绝对不确定。

它究竟是如何工作的？

Answer 1

当组件将 EventEmitter 作为其属性之一时，它开始向使用它的组件发出事件。这与您使用的 button 元素基本相同。假设 button 是一个组件。它将被声明为：

@Component({
    selector: 'button',
    template: '<div (click)="onButtonClick()"></div>'
})
class Button {
    click = new EventEmitter();

    onButtonClick() {
        this.click.emit(/* an event value */)
    }
}

然后通过侦听 click 事件 (<button (click)="onStartGame()">) 在 GameControlComponent 中使用此 button 组件。

您现在大概可以了解发送的内容以及接收者应该是谁了。在您的示例中，GameControlComponent 的 intervalFired 事件的使用者应该是您的 AppRoot 组件，或任何其他使用 <app-game-control> 组件的组件。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <app-game-control (intervalFired)="handleInterval($event)"></app-game-control>
    </div>
  </div>
</div>

如您所见，handleInterval 函数具有 $event 参数。此参数的值是您的内部 (GameControlComponent) 组件发出的值，即。 this.lastNumber + 1.

Answer 2

您应该使用 @Output() 从组件发出事件。

注意：@Output() intervalFired = new EventEmitter<number>(); 应该是要发出的事件。

您可以在根组件中处理该事件，如下所示，

<div class="col-xs-12">
      <app-game-control (intervalFired)="intervalFired($event)" ></app-game-control>
</div>

打字稿代码

intervalFired(e){
   this.lastNumber = e;
  console.log(e)
}

LIVE DEMO

关于 Angular 中发出的事件的一些疑问 2. 这个例子究竟是如何工作的？

Some doubts about the event emit in Angular 2. How exactly this example works?

javascript

javascript-framework

typescript

angular