Question

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

将它们导入到将TypeScript编译目标设置为es6的项目中时，它们将停止工作并引发错误：

TypeError：如果没有'new'，则不能调用类构造函数DefaultValueAccessor

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

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

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

Answer 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状态保持正常运行。

TypeError：如果没有“ new”，则无法调用类构造函数DefaultValueAccessor

1 个答案: