发出名称与 Angular 中 Event 类型的默认 HTML 事件重叠的事件

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

TLDR；您不必与

change

原生事件发生碰撞。

---

用例#1

正确的答案主要取决于你的组件，如果你正在制作一个“真正的”组件，旨在在你的应用程序中广泛使用那么你所有的3个选项都是错误的。（我的意思是像自定义选择，组合框这样的组件，诸如此类的东西）。

相反，您应该实现

ControlValueAccessor

，这样原生事件就不会与您的发生冲突。

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

---

用例#2

但是，如果你的组件不是这样的……那么选项 1 就是这样的。 Angular 中的一个简单的命名约定是 * 根据触发事件的时间来命名你的事件 当你的“行为”发生变化时，而不是整个组件发生变化时，你的事件就会被触发。如果您是第二种情况，那么您应该采用

ControlValueAccessor

方法。

甚至还有一个标志，您可以默认打开它，它的名字是

no-output-named-after-standard-event

。