类正在使用 Angular 功能，但没有装饰。请添加一个显式的 Angular 装饰器

Question

我有这样一些组件CricketComponent，FootballComponent，TennisComponent等所有这些类有一些共同的特性： -TeamName, teamSize, players等，这是@Input()。

现在我创建了一个BaseComponent类，在那里定义了所有这些属性，这个baseComponent类将被板球/足球/网球/等组件扩展。

基础组件.ts

export class BaseComponent {

    @Input() TeamName: string;
    @Input() teamSize: number;
    @Input() players: any;

}

CricketComponent.ts

@Component({
  selector: 'app-cricket',
  templateUrl: './cricket.component.html',
  styleUrls: ['./cricket.component.scss']
})
export class cricketComponent extends BaseComponent implements OnInit {

  constructor() {
    super();
  }

  ngOnInit(): void {
  }

}

我收到此错误：

src/app/base-screen.ts:4:14 中的错误 - 错误 NG2007：

类正在使用 Angular 功能，但没有装饰。请添加一个显式的 Angular 装饰器。

Answer 1

您需要@Component向该基类添加一个装饰器（可能也应该声明abstract）。

这是您在 Angular 9 中可以逃脱的最低限度：

@Component({
  template: ''
})
export abstract class BaseComponent {

    @Input() teamName: string;
    @Input() teamSize: number;
    @Input() players: any;
}

对于 Angular 10+，请参阅此答案。

Answer 2

从 Angular 10 开始，您可以通过将装饰器 @Injectable() 添加到抽象基类中来解决此问题，如下所示：

@Injectable()
export abstract class BaseComponent {    
    @Input() teamName: string;
    @Input() teamSize: number;
    @Input() players: any;
}

Answer 3

另请参阅： 缺少 @Directive()/@Component() 装饰器迁移

前：

export class BaseComponent {
    @Input() TeamName: string;
    @Input() teamSize: number;
    @Input() players: any;
}

后：

@Directive()
export class BaseComponent {
    @Input() TeamName: string;
    @Input() teamSize: number;
    @Input() players: any;
}

Answer 4

虽然在 using 中接受的答案是正确的@Component，但一个小缺点是它要求所有构造函数参数类型都可以由 DI 解析。因此，如果您的基类构造函数采用常量/文字（例如枚举）作为标志，则您将必须设置相应的 DI 提供程序/令牌才能使其编译。

但是，您也可以使用@Directive装饰器来解决 NG2007 ，这不需要 DI 兼容性