클래스에서 Angular 피쳐를 사용하고 있지만 장식되지 않았습니다.명시적인 각도 장식기를 추가하십시오.

클래스에서 Angular 피쳐를 사용하고 있지만 장식되지 않았습니다.명시적인 각도 장식기를 추가하십시오.

다음과 같은 구성 요소가 있습니다.CricketComponent,FootballComponent,TennisComponent등. 모든 클래스는 몇 가지 공통 속성을 가집니다.TeamName, teamSize, players등에 해당하는 것들@Input().

이제 제가 만든 것은BaseComponent클래스, 이 모든 속성을 정의했습니다.baseComponent크리켓/축구/테니스/기타 구성 요소에 의해 수업이 연장됩니다.

기본 구성 요소.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 피쳐를 사용하고 있지만 장식되지 않았습니다.명시적인 각도 장식기를 추가하십시오.

다음을 추가해야 합니다.@Component해당 기본 클래스의 장식자(아마도 선언되어야 할 것입니다.abstract).

이것은 Angular 9에서 벗어날 수 있는 최소치입니다.

import { Component } from '@angular/core';

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

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

Angular 10+의 경우 다음 답변을 참조하십시오.

Angular 10에서 다음과 같이 추상 기본 클래스에 데코레이터 @Injectable()을 추가하여 이 문제를 해결할 수 있습니다.

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

승인된 답변이 올바른 사용법인 경우@Component한 가지 사소한 단점은 모든 생성자 인수 유형을 DI에 의해 해결할 수 있어야 한다는 것입니다. 따라서 기본 클래스 생성자가 상수/문법적(예: 열거형)을 플래그로 사용하는 경우 컴파일하려면 해당 DI 공급자/토큰을 설정해야 합니다.

그러나 다음을 사용하여 NG2007을 해결할 수도 있습니다.@DirectiveDI 호환성이 필요 없는 대신 데코레이터

참고 항목: @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;
}

그냥 추가@Injectable()장식가는 당신의 반에, 그리고 당신은 다음 경로로부터 그것을 가져올 수 있습니다.import { Injectable } from '@angular/core';

저도 달리기를 할 때 비슷한 상황이 있었습니다.ng serve타사 라이브러리와 모든 Angular 구성 요소가 장식되어 있음에도 불구하고 해당 오류가 발생했습니다.

이 문제가 발생하는 경우 Angular 11 'error NG2007: Class is using Angular features'에 대한 다음 답변을 참조하십시오. 하지만 수업은 꾸며져 있습니다.

다음 오류의 경우: NG6001: 클래스 'XComponent'는 NgModule 'AppModule'의 선언에 나열되지만 지침, 구성 요소 또는 파이프는 아닙니다.NgModule의 선언에서 제거하거나 적절한 Angular 데코레이터를 추가합니다.

NG2003: 클래스 'Y'의 매개 변수 'A'에 적합한 주입 토큰이 없습니다.

NG2007: 클래스가 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에서 사용되고 있다고 가정하고 클래스 Y의 코드를 @Component({}) 위 또는 클래스 XComponent 아래에 씁니다.

Angular 15에서 이를 경험하고 있다면 TypeScript의 정확한 버전을 사용하십시오. 4.8.2가 저에게 도움이 되었습니다.

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

언급URL : https://stackoverflow.com/questions/63126067/class-is-using-angular-features-but-is-not-decorated-please-add-an-explicit-ang