发出与 HTML DOM 事件重叠的 Angular 事件

Question

我有一个工作代码发出这样的事件。

@Output() actChange = new EventEmitter<string[]>();
private emitIds() { ... 
  this.actChange.emit(includedIds); 
}

就这样成功处理了事件。

<app-child (actChange)="onActChange($event)">

onActChange(input: string[]) {
  console.log('input', input);
  ...
}

然后，我通过删除 act 的指示符来更改它，最终得到此结果。

@Output() change = new EventEmitter<string[]>();
private emitIds() { ... 
  this.change.emit(includedIds); 
}

<app-child (change)="onChange($event)">

onChange(input: string[]) {
  console.log('input', input);
  ...
}

它仍然按预期工作，只有一点区别。该方法现在被调用两次：一次用于先前所需的效果，然后再次调用

Event

类型的默认事件（HTML 中某些内容的默认更改）。

我明白发生了什么以及为什么。然而，我有多种方法来处理它，但我不确定该选择哪种。我担心会出现意想不到的、目前模糊的负面影响。

选项 1 是不为事件使用重叠的名称。

@Output() actChange = new EventEmitter<string[]>();

选项 2 是通过明确防范来处理默认的

change

。

onChange(input: string[]) {
  console.log('input', input);
  if (input instanceof Event)
    return;
  ...
}

选项 3 是关闭正在触发的默认事件（但不清楚如何操作）。

我用谷歌搜索并阅读了发射事件，建议的风格等，但没有找到任何明确的重用事件名称或如何处理它的指示。我已经看到了前缀的建议，但这不是规范的最佳实践。

上述哪些选项带来的负面影响为零（或最小）？还有什么其他方法可以最大限度地降低未来的风险？

Answer 1

没有相关的官方文档。

但是，已知的良好做法是永远不要为自定义框架事件使用 Html 基本事件命名（它适用于任何 js 框架） - 要知道，由于它们是 HTML 定义的，因此行为可能是未知的，具体取决于您的框架.

以下是官方 HTML 事件列表：https://www.w3.org/wiki/List_of_events

Answer 2

TLDR；选项 1 是方式。

---

1. 选项#1：使用操作前缀的命名约定，例如：

   actChange

这里有非官方媒体博客文章参考作为最佳实践。但是，您可以按原样考虑它，因为

angular/angular-cli

codelyzer 项目 将其添加为参数，称为

no-output-named-after-standard-event

来处理 tslint。

该规则已迁移到 eslint，如

no-output-native

：

关于该功能的隐式命名约定是根据何时触发事件来命名事件。在你的情况下，当你的“行为”改变时，事件被触发，而不是你的整个组件。

注意：切勿使用“on”作为前缀。

---

2. 选项#2：在实现中处理

   change

此选项陷入了 Codelyzer 关于事件所解决的相同陷阱。不要将它们命名为任何 HTML DOM Events。

此外，这种方法还存在潜在的错误，因为开发人员必须记住处理 HTML DOM 事件。

---

3. 选项#3：删除 HTML DOM 事件

change

活动不可取消，所以忘记这一点吧。

---

一些注释：我认为没有关于此事的官方文档，因为他们只是将其视为隐含规则：

• 即使

  angular/components

  项目，直接拒绝处理问题。
• 此外，angular/angular项目有

  功能请求

  ，以删除额外的事件。然而，它变旧了，然后自动关闭了。