[英]Class is using Angular features but is not decorated. Please add an explicit Angular decorator
I have some components like CricketComponent
, FootballComponent
, TennisComponent
etc. All These Classes have some common properties:- TeamName, teamSize, players
etc which are @Input()
.我有一些组件,如
CricketComponent
、 FootballComponent
、 TennisComponent
等。所有这些类都有一些共同的属性:- TeamName, teamSize, players
等,它们是@Input()
。
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
类,在其中定义了所有这些属性,这个baseComponent
类将由 cricket/football/tennis/etcComponents 扩展。
baseComponent.ts基础组件.ts
export class BaseComponent {
@Input() TeamName: string;
@Input() teamSize: number;
@Input() players: any;
}
CricketComponent.ts板球组件.ts
@Component({
selector: 'app-cricket',
templateUrl: './cricket.component.html',
styleUrls: ['./cricket.component.scss']
})
export class cricketComponent extends BaseComponent implements OnInit {
constructor() {
super();
}
ngOnInit(): void {
}
}
I am getting this error:我收到此错误:
ERROR in src/app/base-screen.ts:4:14 - error NG2007: src/app/base-screen.ts:4:14 中的错误 - 错误 NG2007:
Class is using Angular features but is not decorated.类使用 Angular 特性但没有修饰。 Please add an explicit Angular decorator.
请添加一个明确的 Angular 装饰器。
You'll need to add a @Component
decorator to that base class (which should probably also be declared abstract
).您需要将
@Component
装饰器添加到该基础 class (可能也应该声明为abstract
)。
This is the bare minimum you can get away with in Angular 9:这是您在 Angular 9 中可以摆脱的最低限度:
@Component({
template: ''
})
export abstract class BaseComponent {
@Input() teamName: string;
@Input() teamSize: number;
@Input() players: any;
}
For Angular 10+, see this answer .对于 Angular 10+,请参阅此答案。
From Angular 10, you can fix this issue by adding the decorator @Injectable() to your abstract base class like this:从 Angular 10 开始,您可以通过将装饰器 @Injectable() 添加到抽象基础 class 来解决此问题,如下所示:
@Injectable()
export abstract class BaseComponent {
@Input() teamName: string;
@Input() teamSize: number;
@Input() players: any;
}
While the accepted answer is correct in using @Component
, one minor downside is that it requires all constructor argument types to be resolvable by DI.虽然在使用
@Component
时接受的答案是正确的,但一个小缺点是它要求所有构造函数参数类型都可以由 DI 解析。 So if your base class constructor takes a constant/literal - say, an enum - as a flag, you're going to have to set up a corresponding DI provider/token just to get it to compile.因此,如果您的基本 class 构造函数采用常量/文字(例如枚举)作为标志,您将不得不设置相应的 DI 提供程序/令牌才能使其编译。
You can however also resolve NG2007 using the @Directive
decorator instead, which doesn't require DI compatibility但是,您也可以使用
@Directive
装饰器来解决 NG2007,这不需要 DI 兼容性
Look it: Missing @Directive()/@Component() decorator migration看一下:缺少 @Directive()/@Component() 装饰器迁移
Before:前:
export class BaseComponent {
@Input() TeamName: string;
@Input() teamSize: number;
@Input() players: any;
}
Afert:之后:
@Directive()
export class BaseComponent {
@Input() TeamName: string;
@Input() teamSize: number;
@Input() players: any;
}
If you are experiencing this in Angular 15, use an exact version of TypeScript.如果您在 Angular 15 中遇到此问题,请使用准确版本的 TypeScript。 4.8.2 worked for me.
4.8.2 对我有用。
npm i typescript@4.8.2 -D --save-exact
I had a similar situation when running ng serve
.我在运行
ng serve
时遇到了类似的情况。 I was getting that error for 3rd party libraries and for all my Angular components even though they were decorated.对于第 3 方库和我的所有 Angular 组件,即使它们已被装饰,我也遇到了该错误。
If you're having this problem, see this answer for Angular 11 'error NG2007: Class is using Angular features but is not decorated.'如果您遇到此问题,请参阅Angular 11 'error NG2007: Class is using Angular features but is not decorated 的答案。 But the class is Decorated
但是 class 是装饰的
For These errors: NG6001: The class 'XComponent' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe.对于这些错误:NG6001:类“XComponent”列在 NgModule“AppModule”的声明中,但不是指令、组件或管道。 Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.
要么将它从 NgModule 的声明中移除,要么添加一个合适的 Angular 装饰器。
NG2003: No suitable injection token for parameter 'A' of class 'Y'. NG2003:类“Y”的参数“A”没有合适的注入标记。
NG2007: Class is using Angular features but is not decorated. NG2007:类正在使用 Angular 功能但未修饰。 Please add an explicit Angular decorator.
请添加一个明确的 Angular 装饰器。
You may be writing the new class between @Component declaration and Component class.您可能正在 @Component 声明和 Component 类之间编写新类。
ex.前任。
// export class Y{ // } // 导出类 Y{ // }
@Component({
selector: 'app-X',
templateUrl: './X.component.html',
styleUrls: ['./X.component.css']
})
export class XComponent implements OnInit {
todos : Y[] = [
new Y(1 ),
new Y(2 ),
new Y(3 )
]
constructor() { }
ngOnInit(): void {
}
}
//export class Y{ //} //导出类 Y{ //}
ie if you have more than one class.即如果你有不止一节课。 let say class XComponent and Class Y, where class Y is being used in class XComponent, then write code for class Y either above @Component({}) or below class XComponent
假设 XComponent 类和 Y 类,其中 Y 类在 XComponent 类中使用,然后在 @Component({}) 类之上或 XComponent 类之下为 Y 类编写代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.