Question

我是 Angular 2 的绝对初学者，我对这个示例究竟如何与框架发出事件的方式有关（我正在遵循教程）。

所以我有以下情况：

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

def my_udf = udf((array: mutable.WrappedArray[Int]) => array match{
  case x if(x.contains(13)) => 1
  case _ => 0
})

df.withColumn("new_col", my_udf($"father"(0))).show(false)

如您所见，包括<div class="container"> <div class="row"> <div class="col-xs-12"> <app-game-control></app-game-control> </div> </div> </div>子组件。它的视图仅在我的单页面应用程序中显示2个按钮，这些按钮：

<app-game-control></app-game-control>

点击第一个称为相关子组件控制器方法 onStartGame（），这是该控制器的完整代码：

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

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

在这里，我对点击按钮时究竟发生了什么感到疑惑。

根据我的理解，事件只是一个可以发出的对象，在这种情况下它应该是一个包含单个数字字段的对象：

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);
  }

}

对事件的这种解释是正确还是我遗漏了什么？

当用户点击按钮时，会执行 onStartGame（）。此方法应发出事件（对其值进行简单计算）。

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

它究竟是如何运作的？

Answer 1

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

Answer 2

当组件将EventEmitter作为其属性之一时，它会开始使用它向组件发出事件。这与您使用的button元素大致相同。让我们想象button是一个组件。它将被宣布为：

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

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

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

您现在可以了解发出的内容以及收件人应该是谁。在您的示例中，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。

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

2 个答案: