正文 

当前位置： 首页 > 知识 >

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

     2023-02-22     111

关键词：

【中文标题】关于 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>

如您所见，包括&lt;app-game-control&gt;&lt;/app-game-control&gt; 子组件。它的视图仅在我的单页应用程序中显示 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事件(&lt;button (click)="onStartGame()"&gt;)在你的GameControlComponent中使用这个button组件。

您现在大概可以了解发出了什么以及接收者应该是谁。在您的示例中，GameControlComponent 的intervalFired 事件的使用者应该是您的AppRoot 组件，或使用&lt;app-game-control&gt; 组件的任何其他组件。

<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&lt;number&gt;(); 应该是要发出的事件。

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

<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 - 从父组件向动态子组件发出事件

】Angular-从父组件向动态子组件发出事件【英文标题】：Angular-emiteventfromparentcomponenttodynamicchildcomponents【发布时间】：2018-09-3015:10:50【问题描述】：编辑：我采取了不同的方法来解决这个问题：根据接受的答案，在save()上的父级... 查看详情

需要一些关于 C++ 中的类的建议，双向链表

】需要一些关于C++中的类的建议，双向链表【英文标题】：NeedsomeadvicewithclassesinC++,doublylinkedlist【发布时间】：2016-06-2702:33:14【问题描述】：我正在尝试打印列表中的所有元素，但输出错误。代码得到2、0和10，当我调用过程“tra... 查看详情

SVG：关于事件的对象分层

...对SVG的分层和事件有疑问。例如：https://stackblitz.com/edit/angular-ivy-rkxuic?file=src/app/app.component.tsapp.component.tsimportComponent,VERSI 查看详情

Angular 4在共享服务中发出和订阅事件

】Angular4在共享服务中发出和订阅事件【英文标题】：Angular4emittingandsubscribingtoaneventinasharedservice【发布时间】：2018-01-0305:32:38【问题描述】：我正在我的主要组件中发出一个事件：main.component.tsthis.sharedService.cartData.emit(this.data);... 查看详情

关于“理解 Keras LSTMs”的疑问

】关于“理解KerasLSTMs”的疑问【英文标题】：Doubtsregarding`UnderstandingKerasLSTMs`【发布时间】：2019-05-2601:49:42【问题描述】：我是LSTM的新手，并且正在浏览UnderstandingKerasLSTMs，并且对DanielMoller的漂亮答案有一些愚蠢的疑问。以下是... 查看详情

Angular 2点击事件中的动态函数名称

】Angular2点击事件中的动态函数名称【英文标题】：DynamicfunctionnameinAngular2clickevent【发布时间】：2017-05-0301:01:35【问题描述】：虽然这个答案可能很简单，但我似乎被困住了。作为Angular2的初学者，我尝试了所有可能的、[]和()括... 查看详情

带有鼠标事件的 Angular 2/4 图像裁剪

】带有鼠标事件的Angular2/4图像裁剪【英文标题】：Angular2/4ImageCroppingwithmouseevent【发布时间】：2017-07-1911:39:17【问题描述】：我是angular2/4的新手。我正在寻找可以使用鼠标事件裁剪图像的角度包。我搜索了很多，但可以找到任何... 查看详情

委托：Angular 中的 EventEmitter 或 Observable

】委托：Angular中的EventEmitter或Observable【英文标题】：Delegation:EventEmitterorObservableinAngular【发布时间】：2016-03-2609:59:23【问题描述】：我正在尝试在Angular中实现类似委托模式的东西。当用户单击nav-item时，我想调用一个函数，该... 查看详情

如何从Angular 2中的子组件事件触发父组件中的本地引用？

】如何从Angular2中的子组件事件触发父组件中的本地引用？【英文标题】：HowtotriggerlocalreferenceinparentcomponentfromchildcomponenteventinAngular2?【发布时间】：2016-11-2719:31:45【问题描述】：我正在尝试使用Material2sidenav从子组件模板单击事... 查看详情

Angular MatSort.sortChange：尝试从函数更新排序时忽略事件数据

】AngularMatSort.sortChange：尝试从函数更新排序时忽略事件数据【英文标题】：AngularMatSort.sortChange:eventdataignoredwhentryingtoupdatesortfromfunction【发布时间】：2018-05-1308:00:57【问题描述】：我对AngularMaterial中的MatSort.sortChange的使用有疑问... 查看详情

节点 js busboy 不使用 angular js $http post 发出事件

】节点jsbusboy不使用angularjs$httppost发出事件【英文标题】：nodejsbusboynotemittingeventswithangularjs$httppost【发布时间】：2015-02-0212:38:04【问题描述】：Busboy似乎只是卡在那里。我已经测试了所有3个事件（文件、字段、完成），但没有发... 查看详情

关于video.js的一些普遍疑问[关闭]

】关于video.js的一些普遍疑问[关闭]【英文标题】：Somegeneraldoubtsaboutvideo.js[closed]【发布时间】：2012-12-0119:44:10【问题描述】：我对播放器有一些普遍的疑问。我会列出它们：video.js是否支持HLS视频格式？如果是这样，在什么平台... 查看详情

绑定中的 Angular 2 绑定。事件内插值

】绑定中的Angular2绑定。事件内插值【英文标题】：Angular2bindingwithinbinding.Interpolationwithinevent【发布时间】：2016-08-0804:14:23【问题描述】：尝试执行以下操作并得到“Gotinterpolation()whereexpressionisexpected”错误。<ul><li*ngFor="#ite... 查看详情

关于死锁的一些概念

关于死锁的一些概念1.死锁：如果一组进程中的每一个进程都在等待仅由该组进程中的其它进程才能引发的事件，那么该组进程是死锁的。2.产生死锁的原因：　　（1）竞争不可抢占性资源。　　（2）竞争可消耗资源。当系统中... 查看详情

关于 ARM NEON 周期的一些疑问

】关于ARMNEON周期的一些疑问【英文标题】：somedoubtsregardingcyclesofARMNEON【发布时间】：2014-06-1306:33:22【问题描述】：我在汇编中编写了一些霓虹灯代码，旨在最大限度地优化。尽管由于寄存器冲突和流水线导致的延迟减少了，但... 查看详情

关于python的一些疑问(代码片段)

1.在默认unicode情况下，tuple中不能输出中文：如图hobby1=u‘篮球‘t_h=(hobby1,)printt_h输出：(u‘\u7bee\u7403‘,)  查看详情

关于react的一些疑问点

1、refs　　<inputtype="text"ref="input">　　<divref="div">222</div>　　<divref={this.refHandle.bind(this)}>3333</div>　　则打印出来的　　　console.log(this.refs)  //object{input: 查看详情

关于可序列化交易的一些疑问？

】关于可序列化交易的一些疑问？【英文标题】：Somequeriesregardingserializabletransactions?【发布时间】：2011-10-1417:59:09【问题描述】：我已经读过，提交的隔离可以提供比可序列化隔离级别更多的并发性。我的问题是已提交的读隔离... 查看详情