爲什麼ngModel寫入值兩次

Question

我寫了一個自定義窗體控件，實現了ControlValueAccessor接口。

@Component({ 
    selector: 'counter', 
    template: ` 
    <button (click)="increase($event)">+</button> 
    {{counter}} 
    <button (click)="decrease($event)">-</button> 
    `, 
    providers: [{ 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => CounterComponent), 
    multi: true 
    }] 
}) 
export class CounterComponent implements OnInit, ControlValueAccessor { 
    private counter: number = 0; 
    private onChange: (_: any) => void; 
    private onTouched:() => void; 

    ngOnInit() { } 

    writeValue(value) { 
    console.log('Write value', value); 
    this.counter = value; 
    } 

    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 

    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 

    increase() { 
    this.counter++; 
    this.onChange(this.counter); 
    } 
    decrease() { 
    this.counter--; 
    this.onChange(this.counter); 
    } 
} 

但是我發現writeValue會觸發兩次，當我使用ngModel。

@Component({ 
    selector: 'my-app', 
    template: '<counter [(ngModel)]="count"></counter>', 
    styleUrls: [ './app.component.css' ] 
}) 
export class AppComponent { 
    count = 5; 
} 

output:

Write value null 
Write value 5 

在線例子鏈接：https://stackblitz.com/edit/angular-ngmodel-write-value

Answer 1

這是在角項目開放的缺陷 - https://github.com/angular/angular/issues/14988