为什么更改事件是针对controlValueAccessor的模糊触发的

Posted 2021-04-15

如果我在我的模板中放置一个实现ControlValueAccessor接口的自定义输入并绑定到它的change事件，如下所示：

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

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

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

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

Here is a plnkr

答案

应触发(change)

当输入值的更改导致将新值提交给模型时。

但在这种情况下，我不认为你使用的是模型。

你想要的是每次输入你的输入时做一些事情，所以我会改用(keyup)。

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

另一答案

我有点惭愧，但事件只是起泡。

same with keyup event：

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