TypeError: Class constructor DefaultValueAccessor cannot be invoked without 'new'

Question

有一些 Angular 第三方库提供 directives which internally extends the DefaultValueAccessor class。

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

TypeError: Class constructor DefaultValueAccessor cannot be invoked without 'new'

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

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

图书馆如何正确解决这个问题？

Answer 1

我已经解决了 class 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: Class constructor DefaultValueAccessor cannot be invoked without 'new'

TypeError: Class constructor DefaultValueAccessor cannot be invoked without 'new'

typescript

ecmascript-6

angular-directive

angular

controlvalueaccessor