angular - 如何在 Angular/ typescript 中正确覆盖子类中基类的属性？ ngx-quill 和 Material

Question

我正在尝试按照作者在此处的示例来实现 ngx-quill 的 Material 版本:ngx-quill-example
问题是我在直接从示例存储库复制的文件 ( mat-quill-base.ts ) 中收到以下错误:

'disabled' is defined as a property in class 'CanUpdateErrorState &CanDisable & MatQuillBase', but is overridden here in '_MatQuillBase'as an accessor.

对于占位符和必需的，我又得到了两个相同的错误。
需要覆盖这些属性以说明运行 ngx-quill 编辑器的 Material 版本所需的更改。
见: stack blitz demo
这是相关代码供引用
mat-quill-base.ts

import {
    Directive,
    AfterViewInit,
    ElementRef,
    HostBinding,
    Inject,
    Input,
    NgZone,
    OnChanges,
    OnDestroy,
    Optional,
    PLATFORM_ID,
    Renderer2,
    Self
} from '@angular/core'
import { DOCUMENT } from '@angular/common'
import {
    ControlValueAccessor,
    FormGroupDirective,
    NgControl,
    NgForm,
    Validator
} from '@angular/forms'
import { DomSanitizer } from '@angular/platform-browser'
import { coerceBooleanProperty } from '@angular/cdk/coercion'
import {
    CanDisable,
    CanDisableCtor,
    CanUpdateErrorState,
    CanUpdateErrorStateCtor,
    ErrorStateMatcher,
    mixinDisabled,
    mixinErrorState
} from '@angular/material/core'
import { HasErrorState } from '@angular/material/core/common-behaviors/error-state'
import { MatFormFieldControl } from '@angular/material/form-field'
import { QuillEditorBase, QuillService } from 'ngx-quill'

// Boilerplate for applying mixins to _MatQuillBase
class MatQuillBase extends QuillEditorBase
{
    constructor(
    public _defaultErrorStateMatcher: ErrorStateMatcher,
    public _parentForm: NgForm,
    public _parentFormGroup: FormGroupDirective,
    public ngControl: NgControl,
    elementRef: ElementRef,
    domSanitizer: DomSanitizer,
    doc: any,
    platformId: any,
    renderer: Renderer2,
    zone: NgZone,
    service: QuillService
    ) {
    super(
        elementRef, domSanitizer, doc, platformId,
        renderer, zone, service
    )
    }
}

const _MatQuillMixinBase: CanUpdateErrorStateCtor & CanDisableCtor & typeof MatQuillBase =
    mixinErrorState(mixinDisabled(MatQuillBase))

@Directive()
export abstract class _MatQuillBase extends _MatQuillMixinBase
    implements AfterViewInit, CanDisable, CanUpdateErrorState,
    ControlValueAccessor, HasErrorState,
    MatFormFieldControl<any>, OnChanges,
    OnDestroy, Validator
{
    abstract controlType: string
    focused = false
    abstract id: string

    constructor(
    defaultErrorStateMatcher: ErrorStateMatcher,
    @Optional() parentForm: NgForm,
    @Optional() parentFormGroup: FormGroupDirective,
    @Optional() @Self() public ngControl: NgControl,
    elementRef: ElementRef,
    domSanitizer: DomSanitizer,
    @Inject(DOCUMENT) doc: any,
    @Inject(PLATFORM_ID) platformId: any,
    renderer: Renderer2,
    zone: NgZone,
    service: QuillService
    ) {
    super(
        defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl,
        elementRef, domSanitizer, doc, platformId, renderer, zone, service
    )

    if (this.ngControl != null) {
        this.ngControl.valueAccessor = this;
    }

    this.onBlur.subscribe(() => {
        this.focused = false
        this.stateChanges.next()
    })
    this.onFocus.subscribe(() => {
        this.focused = true
        this.stateChanges.next()
    })
    }

    /*
    * GETTERS & SETTERS
    */

    @Input()
    get disabled(): boolean
    {
    if (this.ngControl && this.ngControl.disabled !== null) {
        return this.ngControl.disabled
    }
    return this._disabled
    }
    set disabled(value: boolean)
    {
    this._disabled = coerceBooleanProperty(value)

    // Browsers may not fire the blur event if the input is disabled too quickly.
    // Reset from here to ensure that the element doesn't become stuck.
    if (this.focused) {
        this.focused = false
        this.stateChanges.next()
    }
    }
    protected _disabled = false

    get empty() {
    return coerceBooleanProperty(this.value)
    }

    @Input()
    get placeholder(): string { return this._placeholder }
    set placeholder(value: string) {
    this._placeholder = value
    this.stateChanges.next()
    }
    protected _placeholder: string

    @Input()
    get required(): boolean { return this._required }
    set required(value: boolean) {
    this._required = coerceBooleanProperty(value)
    }
    protected _required = false

    @HostBinding('class.floating')
    get shouldLabelFloat() {
    return this.focused || !this.empty
    }

    get value(): any
    {
    try {
        return this.valueGetter(this.quillEditor, this.editorElem!)
    } catch (e) {
        return
    }
    }
    set value(value: any) {
    this.writeValue(value)
    this.stateChanges.next()
    }

    /*
    * METHODS
    */

    blur() {
    (this.editorElem.childNodes as NodeListOf<HTMLElement>)[0]['blur']()
    }

    focus() {
    this.quillEditor.focus()
    }

    @HostBinding('attr.aria-describedby') _describedBy = ''
    setDescribedByIds(ids: string[]) {
    this._describedBy = ids.join(' ')
    }

    onContainerClick(event: MouseEvent)
    {
    if (!this.focused) {
        this.quillEditor.focus()
    }
    }

    static ngAcceptInputType_disabled: boolean | string | null | undefined
    static ngAcceptInputType_required: boolean | string | null | undefined
}

disabled , required , 和 placeholder都在 QuillEditorBase 中定义类(class)。这是来自 ngx-quill 节点模块:

export declare abstract class QuillEditorBase implements AfterViewInit, ControlValueAccessor, OnChanges, OnDestroy, Validator {
    elementRef: ElementRef;
    protected domSanitizer: DomSanitizer;
    protected doc: any;
    protected platformId: any;
    protected renderer: Renderer2;
    protected zone: NgZone;
    protected service: QuillService;
    quillEditor: QuillType;
    editorElem: HTMLElement;
    content: any;
    format?: 'object' | 'html' | 'text' | 'json';
    theme?: string;
    modules?: QuillModules;
    debug?: 'warn' | 'log' | 'error' | false;
    readOnly?: boolean;
    placeholder?: string;
    maxLength?: number;
    minLength?: number;
    required: boolean;
    formats?: string[] | null;
    customToolbarPosition: 'top' | 'bottom';
    sanitize: boolean;
    styles: any;
    strict: boolean;
    scrollingContainer?: HTMLElement | string | null;
    bounds?: HTMLElement | string;
    customOptions: CustomOption[];
    customModules: CustomModule[];
    trackChanges?: 'user' | 'all';
    preserveWhitespace: boolean;
    classes?: string;
    trimOnValidation: boolean;
    onEditorCreated: EventEmitter<any>;
    onEditorChanged: EventEmitter<EditorChangeContent | EditorChangeSelection>;
    onContentChanged: EventEmitter<ContentChange>;
    onSelectionChanged: EventEmitter<SelectionChange>;
    onFocus: EventEmitter<Focus>;
    onBlur: EventEmitter<Blur>;
    disabled: boolean;
    onModelChange: (modelValue?: any) => void;
    onModelTouched: () => void;
    onValidatorChanged: () => void;
    constructor(elementRef: ElementRef, domSanitizer: DomSanitizer, doc: any, platformId: any, renderer: Renderer2, zone: NgZone, service: QuillService);
    static normalizeClassNames(classes: string): string[];
    valueGetter: (quillEditor: QuillType, editorElement: HTMLElement) => string | any;
    valueSetter: (quillEditor: QuillType, value: any) => any;
    ngAfterViewInit(): Promise<void>;
    selectionChangeHandler: (range: Range | null, oldRange: Range | null, source: string) => void;
    textChangeHandler: (delta: Delta, oldDelta: Delta, source: string) => void;
    editorChangeHandler: (event: 'text-change' | 'selection-change', current: any | Range | null, old: any | Range | null, source: string) => void;
    ngOnDestroy(): void;
    ngOnChanges(changes: SimpleChanges): void;
    addClasses(classList: string): void;
    removeClasses(classList: string): void;
    writeValue(currentValue: any): void;
    setDisabledState(isDisabled?: boolean): void;
    registerOnChange(fn: (modelValue: any) => void): void;
    registerOnTouched(fn: () => void): void;
    registerOnValidatorChange(fn: () => void): void;
    validate(): {
        minLengthError?: {
            given: number;
            minLength: number;
        };
        maxLengthError?: {
            given: number;
            maxLength: number;
        };
        requiredError?: {
            empty: boolean;
        };
    };
    static ɵfac: ɵngcc0.ɵɵFactoryDef<QuillEditorBase, never>;
    static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<QuillEditorBase, never, never, { "required": "required"; "customToolbarPosition": "customToolbarPosition"; "sanitize": "sanitize"; "styles": "styles"; "strict": "strict"; "customOptions": "customOptions"; "customModules": "customModules"; "preserveWhitespace": "preserveWhitespace"; "trimOnValidation": "trimOnValidation"; "valueGetter": "valueGetter"; "valueSetter": "valueSetter"; "format": "format"; "theme": "theme"; "modules": "modules"; "debug": "debug"; "readOnly": "readOnly"; "placeholder": "placeholder"; "maxLength": "maxLength"; "minLength": "minLength"; "formats": "formats"; "scrollingContainer": "scrollingContainer"; "bounds": "bounds"; "trackChanges": "trackChanges"; "classes": "classes"; }, { "onEditorCreated": "onEditorCreated"; "onEditorChanged": "onEditorChanged"; "onContentChanged": "onContentChanged"; "onSelectionChanged": "onSelectionChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; }, never>;
}

我可以进行哪些更改来满足此错误？我在存储库上创建了一个问题，但它在没有任何帮助的情况下被驳回并关闭。所以这是一个死胡同。

Answer 1

来自 https://angular.io/guide/updating-to-version-10 :

New Breaking Changes

Typescript 3.6, 3.7, and 3.8 are no longer supported. Please update toTypescript 3.9.

要解决从 Typescript 4.0.3 到 3.9.7 的降级问题: npm install typescript@3.9.7我正在使用 Angular 10 和 ngx-quill 以及来自 ngx-quill-example 的相同代码，这对我有用。这至少会节省一些时间。