为什么在 controlValueAccessor 模糊时会触发更改事件答案

【问题标题】：Why is the change event fired on blur of a controlValueAccessor为什么在 controlValueAccessor 模糊时会触发更改事件
【发布时间】：2018-06-02 19:42:51
【问题描述】：

如果我在我的模板中放置一个实现 ControlValueAccessor 接口的自定义输入，并像这样绑定到它的更改事件：

  <input-app [value]="'initialVal'" (change)="onChange($event)"></input-app>

由于我的自定义输入没有触发任何模糊事件（要清楚，您必须关注输入，更改它，然后模糊，然后事件将出现在控制台中）。

<input
    type="text"
    [value]="value"/>

onChange() 方法将被调用，我不明白为什么会这样。

Here is a plnkr

【问题讨论】：

你的 plunker 在模糊时不会触发 onChange()。
@Swoox 它确实检查了控制台。您还必须更改输入中写入的内容，但是当您模糊时会触发事件。我编辑了我的问题，因为这不清楚。
如果你在ControlValueAccessor的“onChange”中console.log并移除组件的功能会发生什么？发生的可能性是抽象类覆盖您的函数，然后使用 onblur 事件触发它。发送的事件将保持不变。
@Swoox 抱歉，我不确定我是否理解您的最后评论。您的意思是如果我将（更改）添加到自定义输入的模板内？

标签： angular angular-reactive-forms angular-forms

【解决方案1】：

(change) 应该被触发

当输入值的变化导致新值被提交时模型。

但在这种情况下，我认为您没有使用模型。

您想要在每次输入输入时执行一些操作，因此我会改用 (keyup)。

<input-app [value]="'hey'"  placeholder="your name" (keyup)="onChange($event)"></input-app>

【讨论】：

【解决方案2】：

我有点羞愧，但事件只是冒泡了。

same with keyup event:

@Component({
  selector: 'my-app',
  template: `
    <div (keyup)="onKeyUp()">
      <input/>
    </div>
  `,
})
export class App {      
  onKeyUp() {
    console.log('it bubbles')
  }
}

【讨论】：