typescript 类正在使用Angular 功能，但未进行修饰,请添加显式Angular 修饰器

watbbzwu 于 2022-12-05 发布在 TypeScript

关注(0)|答案(7)|浏览(335)

我有一些组件，如CricketComponent，FootballComponent，TennisComponent等。所有这些类都有一些共同的属性：-TeamName, teamSize, players等，它们是@Input()。
现在，我创建了一个BaseComponent类，在其中定义了所有这些属性，这个baseComponent类将由cricket/football/tennis/etcComponents扩展。
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 -错误NG 2007：

类别正在使用Angular 功能，但未装饰。请加入明确的Angular 装饰器。

typescript

来源：https://stackoverflow.com/questions/63126067/class-is-using-angular-features-but-is-not-decorated-please-add-an-explicit-ang

7条答案

按热度按时间

tzcvj98z1#

您将需要向该基类添加一个@Component装饰器（可能也应该声明为abstract）。
这是你在Angular 9中最低限度的要求：

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

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

对于Angular 10+，请参见this answer。

赞(0）回复(0）举报 2022-12-05

ukdjmx9f2#

在Angular 10中，您可以通过向抽象基类添加decorator @Injectable（）来修复此问题，如下所示：

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

赞(0）回复(0）举报 2022-12-05

wr98u20j3#

虽然accepted answer在使用@Component时是正确的，但有一个小缺点是它要求所有的构造函数参数类型都能被DI解析。因此，如果你的基类构造函数接受一个常量/文本--比如说，一个枚举--作为一个标志，你将不得不设置一个相应的DI提供程序/令牌来编译它。
但是，您也可以使用@Directive装饰器来解析NG 2007，它不需要DI兼容性

赞(0）回复(0）举报 2022-12-05

nfg76nw04#

另请参阅：Missing @Directive()/@Component() decorator migration
之前：

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

赞(0）回复(0）举报 2022-12-05

fcipmucu5#

我在运行ng serve时也遇到过类似的情况。我在第3方库和我所有的Angular 组件上都遇到了这个错误，尽管它们是经过装饰的。
如果遇到此问题，请参阅Angular 11 'error NG2007: Class is using Angular features but is not decorated.' But the class is Decorated的answer

赞(0）回复(0）举报 2022-12-05

2uluyalo6#

对于这些错误：NG 6001：类“XComponent”列在NgModule“AppModule”的声明中，但不是指令、组件或管道。请从NgModule的声明中删除它，或添加相应的Angular 装饰器。
NG 2003：没有适合类别'Y'之参数'A'的插入词语基元。
NG 2007：类别正在使用Angular 功能，但未装饰。请加入明确的Angular 装饰器。
您可以在@Component声明和Component类之间编写新类。
例如
//导出类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 {
  }

}

//导出类Y{ //}
例如，如果您有一个以上的类，比如说类XComponent和类Y，其中类Y在类XComponent中使用，则在@Component（{}）之上或在类XComponent之下编写类Y的代码

赞(0）回复(0）举报 2022-12-05

3hvapo4f7#

如果您在Angular 15中遇到这种情况，请使用TypeScript的确切版本。4.8.2对我有效。