為什么 ControlValueAccessor 不更新我在組件內的值？

Question

為什么當我使用 ControlValueAccessor 時，該值不會更新並以反應形式反映？

在我的應用程序中，我有一個表格：

 profileForm = new FormGroup({
    name: new FormControl(1),
  });

而我通過name從profileForm使用formControlName到my-comp （ControlValueAccessor）組件。

：現在，當我點擊按鈕changeValueFromMyApp從應用程序組件使用patchValue是更新的名稱更改為2 profileForm和內部值my-comp組件。 （因為它調用 writeValue 方法）。

但是，當我在my-comp組件內部單擊changeValueFromMyComp按鈕以將值更改為 4 時，父更改（ profileForm ）但更改不會反映到my-comp 。 為什么？ 這里缺少什么？ 如何使它工作？

應用程序

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  template:`
    <form [formGroup]="profileForm">
      <my-comp formControlName="name"></my-comp>

    </form>

    form value: {{ profileForm.value | json }}
    <button (click)="changeValueFromMyApp()">changeValueFromMyApp</button>
  `

})
export class AppComponent  {
  profileForm = new FormGroup({
    name: new FormControl(1),
  });


  changeValueFromMyApp() {
    this.profileForm.patchValue({
      name: 2
    });
  }
}

我的comp.ts：

import { Component, forwardRef } from '@angular/core';
import { FormGroup, FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'my-comp',
  template:`
    value inside the component is: {{value | json}}

    <button (click)="changeValueFromMyComp()">change the value to 4</button>

  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyComp),
      multi: true
    }
  ]
})
export class MyComp implements ControlValueAccessor {

  value;
  onChange = () => {};
  onTouch = () => {};

  writeValue(value) {
    // this is happends when the parent change the value?
    this.value = value;
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouch(fn) {
    this.onTouch = fn;
  }

  changeValueFromMyComp() {
    this.onChange(4);
  }
}

Answer 1

您需要在此處更新變量“值”（my-comp.ts）：

changeValueFromMyComp() {
    this.onChange(4);
    this.value = 4;
}

onChange 函數不會自動更新值。