Angular 2.0是输入值还是基于事件？-Java 学习之路

想象一下，我会有一个应该接收事件的组件，例如"player" . 用户可能想要向玩家触发事件，例如"play"或"pause" . 根据我的理解， @inputs 基本上是我们发送给组件的值（而不是事件） . 将这些事件触发到组件的好习惯是什么？

考虑一个玩家的例子： - 玩家没有UI，它只是一个能够加载源文件的标签 . - 我们需要找到一种方便的方法来驱动这个玩家发起诸如“开始”，“停止”，“暂停”等事件......

我考虑在 <player [controls]=controls src="somefile.mp3"/> 等参数中传递eventEmitter，其中 control 将是EventEmitter . 然后，组件's controller would internally observe this emitter'事件并相应地动作（播放，停止，暂停......） .

任何其他解决方案/惯例来实现这一点？

更多想法：

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

1 回答

0
要使组件响应收到的事件，您可以使用 @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> 的组件类 .
回复于 2024-05-19T17:55:15+08:00

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

1 回答

相关问题