Angular自定义组件change输出事件隐式触发异常问题咨询

异常原因解释 #

你遇到的问题核心是自定义组件的@Output名称与原生DOM事件重名：
当你将自定义组件的输出事件命名为change时，Angular会自动将组件内部原生元素的同名事件（这里是<input>的change事件）冒泡关联到组件的输出绑定上。具体流程是：

1. 修改输入框内容后点击Cancel按钮，输入框失去焦点，触发原生change事件；
2. 该事件冒泡到自定义组件层面，Angular将其识别为组件的change输出事件，直接触发父组件的回调，而不需要你手动调用emit()；
3. 当你把输出名称改为textChange时，该名称与任何原生DOM事件都不重名，Angular不会进行自动关联，只有手动调用emit()才会触发父组件回调。

代码复现 #

自定义组件类（inplace-input.component.ts） #

export class InplaceInputComponent {
  @Input() value: string;
  @Output() change = new EventEmitter<string>();

  editedValue: string;

  inputChange(event: any) {
    this.editedValue = (event.target as HTMLInputElement).value;
  }

  ok() {
    this.change.emit(this.editedValue);
  }

  cancel() {
    this.editedValue = this.value;
  }
}

自定义组件模板（inplace-input.component.html） #

<input
  type="text"
  [value]="value"
  (change)="inputChange($any($event))"
  [style]="'padding: 5px; border: 1px solid blue;'"
/>
<button type="button" (click)="ok()">OK</button>
<button type="button" (click)="cancel()">Cancel</button>

父组件使用 #

<inplace-input [value]="name" (change)="onNameChange($any($event))"></inplace-input>

复现步骤 #

• 修改文本输入框内容；
• 点击Cancel按钮；
• 父组件会收到change事件回调，即使未调用emit()。

Angular自定义组件需避免的事件保留词 #

本质上，所有原生DOM事件名称都属于需要避免的“保留词”，因为Angular会自动将组件内部的原生同名事件冒泡映射到组件的输出绑定。常见的包括：

• change
• click
• input
• submit
• blur
• focus
• keydown、keyup、keypress
• mousedown、mouseup、mousemove、mouseover
• scroll
• resize
• touchstart、touchend等触摸事件

内容的提问来源于stack exchange，提问作者Benjamin Caure