Angular 2.0是输入值还是基于事件？

Question

想象一下，我会有一个应该接收事件的组件，一个＆＃34;播放器＆＃34;例如。用户可能想要向玩家触发事件，例如＆＃34; play＆＃34;或者＆＃34;暂停＆＃34;。根据我的理解，@inputs基本上是我们发送给组件的值（而不是事件）。将这些事件触发到组件的好习惯是什么？

考虑一个玩家示例： - 播放器没有UI，它只是一个能够加载源文件的标签。 - 我们需要找到一种方便的方法来驱动这个玩家解雇事件，例如＆＃34;开始＆＃34;，＆＃34;停止＆＃34;，＆＃34;暂停＆＃34; ...

我考虑过在<player [controls]=controls src="somefile.mp3"/>这样的参数中传递eventEmitter，其中control将是EventEmitter。然后，组件的控制器将在内部观察此发射器的事件并采取相应的行动（播放，停止，暂停......）。

实现这一目标的任何其他解决方案/惯例？

更多想法：

• 在播放器的dom元素上创建自定义特定事件，然后trigger事件
• 找到一种方法在代码中获取组件的控制器，并直接调用公共函数，如play（），pause（）....但后来它可能是一个反网络工作者的反传统。

Answer 1

要让组件响应收到的事件，您可以使用@HostListener()

@Component({
  ...
})
class SomePlayer {
  @HostListener('play', ['$event'])
  onPlay(event) {
    ...
  }
}

如果您使用in Angular2 how to know when ANY form input field lost focus中显示的Renderer来发送活动，那么它将适用于WebWorkers。

您也可以使用

@HostListener('window:play', ['$event'])

全球聆听这些事件。

我不确定这是适合您情况的最佳解决方案。 这只会侦听在SomePlayer内触发的事件。只有DOM事件冒泡，而从EventEmitter发出的事件则不是。

一种方法是使用模板变量来直接从控件引用播放器并直接调用MyPlayer组件上的方法。

<player-control (play)="player.play()" (stop)="player.stop()"></player-control>
<my-player #player><my-player>

您也可以使用

@ViewChild(MyPlayer) player:MyPlayer;

buttonClickHandler() {
  this.player.play();
}

来自模板中<my-player>的组件类。