类正在使用Angular功能，但未进行装饰.请添加一个显式的Angular装饰器 [英] Class is using Angular features but is not decorated. Please add an explicit Angular decorator

问题描述

我有一些组件，例如 CricketComponent ， FootballComponent ， TennisComponent 等.所有这些类都有一些共同的属性:- TeamName，teamSize，玩家等为 @Input().

I have some components like CricketComponent, FootballComponent, TennisComponent etc. All These Classes have some common properties :- TeamName, teamSize, players etc which are @Input().

现在，我创建了一个 BaseComponent 类，在其中定义了所有这些属性，并且此 baseComponent 类将通过cricket/football/tennis/etcComponents进行扩展.

Now I created a BaseComponent class, defined all these properties in there and this baseComponent class will be extended by cricket/football/tennis/etcComponents.

baseComponent.ts

baseComponent.ts

export class BaseComponent {

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

}

CricketComponent.ts

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:

ERROR in src/app/base-screen.ts:4:14 - error NG2007:

类正在使用Angular功能，但未进行装饰.请添加一个显式的Angular装饰器.

推荐答案

您需要在该基类中添加一个 @Component 装饰器(可能还应声明为 abstract ).

You'll need to add a @Component decorator to that base class (which should probably also be declared abstract).

这是您在Angular 9中可以逃脱的最低要求:

This is the bare minimum you can get away with in Angular 9:

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

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

对于Angular 10以上版本，请参见此答案.

For Angular 10+, see this answer.

这篇关于类正在使用Angular功能，但未进行装饰.请添加一个显式的Angular装饰器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！