angular – 为什么更新ControlValueAccessor时不要触发ngOnChang

发布时间：2020-12-17 18:09:25 所属栏目：安全来源：网络整理

导读：为什么在ControlValueAccessor中“writeValue”时,ngOnChanges不会触发？我通过registerOnChange发出一些事件,但我没有看到ngOnChanges中的任何动作 const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = new Provider( NG_VALUE_ACCESSOR,{ useExisting: forwardRe

为什么在ControlValueAccessor中“writeValue”时,ngOnChanges不会触发？我通过registerOnChange发出一些事件,但我没有看到ngOnChanges中的任何动作

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR,{
    useExisting: forwardRef(() => CustomInput),multi: true
  });

@Component({
  moduleId: module.id,selector: 'custom-input',templateUrl: 'custom-input.html',styleUrls: ['custom-input.css'],directives: [CORE_DIRECTIVES],providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInput implements ControlValueAccessor{

  private _text: any = '';
  public isValid:boolean = false;


  onChange: EventEmitter<any> = new EventEmitter();
  onTouched: any;


  constructor(private ngControl:NgControl) {

  }

  ngOnChanges(e) {
    console.log('ngOnChanges');
  }

  get text(): any { return this._text; };

  set text(v: any) {
    if (v !== this._text) {
      this._text = v;
      this.onChange.emit(v);
    }
  }

  writeValue(v) {
    this.text = v;
  }
  registerOnChange(fn): void {
    this.onChange.subscribe(fn);
  }
  registerOnTouched(fn): void {
    this.onTouched = fn;
  }

}

解决方法

@Input()属性更改时调用ngOnChanges.

假设您的自定义输入具有文本属性：

export class CustomInput implements OnChanges {
    @Input() text;

    ngOnChanges() {
        console.log('ngOnChanges');
    }
}

然后当someVariable发生变化时,将调用ngOnChanges：

<custom-input [text]="someVariable"></custom-input>

从组件内部进行的更改不会触发回调. ngOnChanges纯粹用于输入.

https://angular.io/guide/lifecycle-hooks#lifecycle-sequence

注意：在ngOnInit之前也会调用ngOnChanges

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!