angular - 使用 controlValueAccessor 的自定义组件 - ts-Lint 错误：在定义之前使用了组件

Question

这是我的 RatingInputComponent 的 @component 装饰器中使用的提供程序。

providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => RatingInputComponent),
      multi: true
    }
  ]

我收到一个 ts-lint 错误：在定义之前使用了“RatingInputComponent”。但forwardRef允许引用尚未定义的引用。

我正在使用 Angular 9.1.3

整个 ts 文件。

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
    selector: 'rating-input',
    templateUrl: './rating-input.component.html',
    styleUrls: ['./rating-input.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => RatingInputComponent),
            multi: true
        }
    ]
})
export class RatingInputComponent implements ControlValueAccessor {
    @Input() items: string[];
    @Input() defaultText = 'Select Item';

    public value: string;
    public isDisabled: boolean;

    private onChange;

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: any): void {
    }

    setDisabledState(isDisabled: boolean): void {
        this.isDisabled = isDisabled;
    }

    writeValue(value: any): void {
        this.value = value;
    }

    selectItem(item): void {
        this.onChange(item);
        this.value = item;
    }
}

任何指导表示赞赏。

Answer 1

打字稿代码有效，似乎是 linter 的问题。您可以通过设置禁用此 lint 规则"no-use-before-declare": false。