[解決済み] クラスはAngularの機能を使っていますが、デコレートされていません。明示的にAngularのデコレータを追加してください。

質問

私は、以下のようないくつかのコンポーネントを持っています。 CricketComponent , FootballComponent , TennisComponent などです。これらのクラスはすべて、いくつかの共通のプロパティを持っています。 TeamName, teamSize, players などがあり、それらは @Input() .

ここで、私が作成した BaseComponent クラスを作成し、そこにこれらのプロパティをすべて定義し、この baseComponent クラスはクリケット/フットボール/テニス/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 {
  }

}

このようなエラーが出ています。

ERROR in src/app/base-screen.ts:4:14 - エラー NG2007:

クラスはAngularの機能を使用していますが、デコレートされていません。明示的にAngularのデコレータを追加してください。

どのように解決するのですか？

を追加する必要があります。 @Component デコレータを追加する必要があります (おそらく、このデコレータも abstract ).

Angular 9では、これが必要最低限です。

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

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

Angular 10+ については この回答 .