TypeError：没有'new'就不能调用类构造函数DefaultValueAccessor

【问题标题】：TypeError: Class constructor DefaultValueAccessor cannot be invoked without 'new'TypeError：没有'new'就不能调用类构造函数DefaultValueAccessor
【发布时间】：2019-04-21 15:18:04
【问题描述】：

有一些 Angular 第三方库提供 directives，它在内部扩展了 DefaultValueAccessor 类。

当它们被导入到 TypeScript 编译目标设置为 es6 的项目中时，它们会停止工作并抛出错误：

TypeError：没有'new'就不能调用类构造函数DefaultValueAccessor

受此问题影响的不同库示例：

解决方法是将库的源代码复制粘贴到我自己的项目中（而不是将库作为 npm 依赖项导入）。然而，由于显而易见的原因，这样做既不好也不方便。

如何在库中正确解决这个问题？

【问题讨论】：

标签： angular typescript ecmascript-6 angular-directive controlvalueaccessor

【解决方案1】：

我已经通过创建类implements ControlValueAccessor 而不是extends DefaultValueAccessor 来解决。

因此，我还必须实现缺少的方法，所以我添加了以下内容：

import { ControlValueAccessor } from "@angular/forms";
// ...

export class MyClass implements ControlValueAccessor {

  // ...

  onChange = (_: any) => {};
  onTouched = () => {};

  // ...

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }

  setDisabledState(isDisabled: boolean): void {
    this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
  }
}

请注意，setDisabledState 不是强制性的（ControlValueAccessor 不会强制您实现它，但您需要它以保持控件的disabled 状态正常工作。

【讨论】：