類使用 Angular 特性但沒有修飾。 請添加一個顯式的 Angular 裝飾器

Question

我有一些組件，如CricketComponent 、 FootballComponent 、 TennisComponent等。所有這些類都有一些共同的屬性：- TeamName, teamSize, players等，它們是@Input() 。

現在我創建了一個BaseComponent類，在其中定義了所有這些屬性，這個baseComponent類將由 cricket/football/tennis/etcComponents 擴展。

基礎組件.ts

export class BaseComponent {

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

}

板球組件.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裝飾器添加到該基礎 class （可能也應該聲明為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() 添加到抽象基礎 class 來解決此問題，如下所示：

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

Answer 3

雖然在使用@Component時接受的答案是正確的，但一個小缺點是它要求所有構造函數參數類型都可以由 DI 解析。 因此，如果您的基本 class 構造函數采用常量/文字（例如枚舉）作為標志，您將不得不設置相應的 DI 提供程序/令牌才能使其編譯。

但是，您也可以使用@Directive裝飾器來解決 NG2007，這不需要 DI 兼容性

Answer 4

看一下：缺少 @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 5

如果您在 Angular 15 中遇到此問題，請使用准確版本的 TypeScript。 4.8.2 對我有用。

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

Answer 6

我在運行ng serve時遇到了類似的情況。 對於第 3 方庫和我的所有 Angular 組件，即使它們已被裝飾，我也遇到了該錯誤。

如果您遇到此問題，請參閱Angular 11 'error NG2007: Class is using Angular features but is not decorated 的答案。 但是 class 是裝飾的

Answer 7

對於這些錯誤：NG6001：類“XComponent”列在 NgModule“AppModule”的聲明中，但不是指令、組件或管道。 要么將它從 NgModule 的聲明中移除，要么添加一個合適的 Angular 裝飾器。

NG2003：類“Y”的參數“A”沒有合適的注入標記。

NG2007：類正在使用 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 類編寫代碼