angular - 为什么在更新 ControlValueAccessor 时不会触发 ngOnChanges

标签 angular

当您在 ControlValueAccessor 中“写入值”时,为什么 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;
  }

}

最佳答案

ngOnChanges@Input() 属性改变时被调用。

假设您的自定义输入有一个文本属性:

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

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

然后 ngOnChanges 将在 someVariable 改变时被调用:

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

在组件内所做的更改不会触发回调。 ngOnChanges 纯粹用于输入。

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


注意:ngOnChanges 也在 ngOnInit 之前被调用

关于angular - 为什么在更新 ControlValueAccessor 时不会触发 ngOnChanges,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37782577/

相关文章:

带选项卡的 Angular 6 RouterLink

javascript - Angular2 + ngrx/存储 : how to change state within a loop?

Angular cli 将所有组件样式放在文档头部

angular - 未捕获( promise ): Event: {\"isTrusted\":true}

angular - 在 Angular 中获取路由参数的有效方法

angular - 如何处理用户登录服务以获取用户信息和注销状态

angular - Angular2 中嵌套 ngFor 循环的计数器

angular - 操作已正确分派(dispatch),但 reducer 未被调用

angular - Ionic - 类别的水平滚动选项卡

angular - 如何以 Angular react 形式使用指令