javascript - ControlValueAccessor(更改)事件被触发两次(Angular 4)

Question

我使用 ControlValueAccessor 创建了一个自定义组件 (my-custom-input)。它有效，但 change 事件被触发了两次。我的组件中触发更改事件的函数如下所示:

private myval: string;

@Input() disabled: boolean = false;
@Output() change = new EventEmitter<string>();

fireChange() {
    console.log("Change emit");
    this.change.emit(this.myval);
    console.log("Change callback");
    this.onChangeCallback(this.myval);
    console.log("Touch emit");
    this.onTouchedCallback(this.myval);
}

这是我在其他组件中监听变化的方式，我尝试使用 my-custom-input:

<my-custom-input [(ngModel)]="this.data" (change)="vChanged()"></my-custom-input>

vChanged() {
    console.log("change", this.data);
}

这是我在控制台中看到的内容:

Change emit
change "oldvalue"
Change callback
Touch emit
change "newvalue"

为什么 change 回调被调用了两次？

Answer 1

也许试试这个:

<my-custom-input [ngModel]="this.data" (change)="vChanged()"></my-custom-input>