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

Posted 2023-02-22

【中文标题】关于 Angular 2 中的事件发出的一些疑问。这个例子究竟是如何工作的？

【英文标题】：Some doubts about the event emit in Angular 2. How exactly this example works?

【发布时间】：2017-11-20 08:13:31

【问题描述】：

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

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

具体是如何工作的？

【问题讨论】：

你应该阅读文档：angular.io/guide/…

在您当前的示例中，nothing 正在接收事件；您没有将其绑定在父模板中。

【参考方案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.

【参考方案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