javascript - 为什么 ngModel 不触发 writevalue 方法中的变化检测？

Question

我写了一个非常简单的自定义表单控件，我没有更改它的 changeDetectionStrategy。

@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;

  constructor(private _cdr: ChangeDetectorRef) { }

  ngOnInit() { }

  writeValue(value) {
    console.log(`Write value`, value);
    this.counter = value;
    // this._cdr.markForCheck(); // it works

    // Use onChange works too
    // if (this.onChange) {
    //   this.onChange(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);
  }
}

然后我在名为 ngmodel-demo 的组件中使用它 with onPush changeDetectionStrategy。

@Component({
  selector: 'ngmodel-demo',
  template: `
    <h3>NgModel Demo</h3>
    <p>Count: {{count}}</p>
    <counter [(ngModel)]="count"></counter>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class NgmodelDemoComponent {
  @Input() name: string;

  public count = 1;

  constructor(private _cdRef: ChangeDetectorRef) {}
}

当我运行应用程序时，我发现计数器组件的值为 1，但它的 View 没有更新。

然后我设置了一个计时器来更新 ngModel 并标记为检查。

ngOnInit() {
  setInterval(() => {
    this.count = ++this.count;
    this._cdRef.markForCheck();
  }, 3000);
}

结果是每次计数器组件的 View 显示的值都是最后一个 ngModel 的值。

在 writeValue 方法中手动调用 markForCheck 有效。但是我没有使用onPush策略，不明白为什么要手动调用？

还有一个疑惑就是为什么在writeValue中调用onChange也可以。

stackblitz 上的在线演示链接:https://stackblitz.com/edit/angular-cfc-writevalue

Answer 1

这是 Angular 中的一个错误。我开了一个issue关于它。有兴趣可以订阅。