Angular - 直接在模板中使用输出事件发射器是一种好习惯吗？

Question

通常在 Angular 中，我习惯于以示例中的方式处理导致组件输出触发的 html 事件：

//component:

@Output()
imageHoverEnter = new EventEmitter<void>();

...

onImageHoverEnter() {
  this.imageHoverEnter.emit();
}

//template:

<div>
  <img src="..." (mouseenter)="onImageHoverEnter()">
</div>

有一个单独的方法来保护正在使用的@Output 的原因与我已经养成的分离控制器和视图逻辑并且没有东西泄漏的习惯有关。这可以帮助进行自动测试。

但是我已经看到了各种示例，包括来自 Google 自己的文档（Angular Material），它直接在模板中使用 @Output 发射器：

<div>
  <img src="..." (mouseenter)="imageHoverEnter.emit()">
</div>

此外，如果我们查看@Input() 字段，它们大部分时间都直接在模板中使用。

现在我很想做同样的事情并放弃“调用函数的函数”方法（在明显没有其他副作用的情况下），我认为没有理由不这样做，除了我不是过去常常查看控制器并发现它比平时更空，并且必须在模板中查找某些逻辑部分。

这样做有什么大的缺点吗？

Answer 1

这是设计偏好的问题。通常，出于多种原因，从控制器调用 emit 是一个更好的主意。

1. 查看代码时会更容易阅读和理解组件逻辑。我讨厌阅读人们的代码，并且不断地在模板和控制器之间来回切换。不要将逻辑放在模板中。

2. 以后在代码中添加功能会更容易。后一种情况很常见，即除了发出事件之外，您还想执行一些其他操作。如果每个事件处理程序都有单独的函数，则以后不需要重构模板，但如果将逻辑放入模板中，则还需要更改模板文件。

3. 保持一致是件好事。因为有很多时候你需要把它放在一个单独的函数中，所以我觉得遵守约定并在应用程序范围内这样做很好。