类正在使用角度特性，但未修饰。请添加显式的角度修饰符

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

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

BaseComponent. ts

export class BaseComponent {


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


}

板球组件

@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-ERROR NG2007:

类正在使用角度特性，但未修饰。请添加显式的角度修饰符。

81270 次浏览
小开
最佳答案

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

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;
}

For Angular 10+, see this answer.

小开

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. 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.

You can however also resolve NG2007 using the @Directive decorator instead, which doesn't require DI compatibility

小开

From Angular 10, you can fix this issue by adding the decorator @Injectable() to your abstract base class like this:

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

See also: Missing @Directive()/@Component() decorator migration

Before:

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

After:

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

I had a similar situation when running ng serve. I was getting that error for 3rd party libraries and for all my Angular components even though they were decorated.

If you're having this problem, see this answer for Angular 11 'error NG2007: Class is using Angular features but is not decorated.' But the class is Decorated

小开

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. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

NG2003: No suitable injection token for parameter 'A' of class 'Y'.

NG2007: Class is using Angular features but is not decorated. Please add an explicit Angular decorator.

You may be writing the new class between @Component declaration and Component class.

ex.

// export class 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{ //}

i.e. 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

小开

If you are experiencing this in Angular 15, use an exact version of TypeScript. 4.8.2 worked for me.

npm i typescript@4.8.2 -D --save-exact

提交答案