Angular 9 Ivy、NgControl 未在指令中初始化

Question

我正在尝试将我的项目更新到 Angular9/Ivy 并遇到以下问题。我有一个自定义 "disabledControl" 指令，如以下博客 (https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110) 中所述。我以带有表达式的反应形式使用它，以根据复选框的组合启用/禁用特定控件。由于对 Angular9 / Ivy 的更新，当首次调用 @Input 方法 set disableControl 时，不再设置 ngControl.control。有任何提示我们可以如何解决建议的博客解决方案吗？

Answer 1

您可以找到一个未解决的问题 Angular Issues

有一个很好的解决方案 tweet by Alexey Zuev

解决方案是在您的指令中使用 ngOnChanges 生命周期挂钩。

这里是如何使用 ngOnChanges 生命周期挂钩来解决问题的示例。

import { NgControl } from '@angular/forms';
import { Directive, Input, OnChanges } from '@angular/core';

@Directive({
  selector: '[disableControl]',
})
export class DisableControlDirective implements OnChanges {
  @Input('disableControl') disableControl;
  constructor(private ngControl: NgControl) {}

  ngOnChanges(changes) {
    if (changes['disableControl']) {
      const action = this.disableControl ? 'disable' : 'enable';

      this.ngControl.control[action]();
    }
  }
}

The full example by Alexey Zuev

Angular 9 Ivy、NgControl 未在指令中初始化

Angular 9 Ivy, NgControl not initialized in Directive

angular-directive

angular-reactive-forms

angular-ivy

angular9