@Component 데코레이터는 정확히 무엇을합니까? <a href="https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html" rel="nofollow noreferrer">official docs</a>에서

Question

우리는

구성 요소의 장식은 당신이 각도 구성 요소로 클래스를 표시하고 구성 요소가 처리 인스턴스화 및 런타임시 사용할 방법을 결정하는 추가 메타 데이터를 제공 할 수 있다는 것을 알고있다.

그러나 나는 더 깊게하고 구성 요소 장식 정말 추가 메타 데이터를 제공 제외하고 무엇을 이해하고 싶습니다.

나는 소스 코드로 나뉘어서 모든 데코레이터가 makeDecorator 함수의 도움으로 만들어 짐을 발견했다. 그리고 여기 나는 길을 잃었다. Component와 ngModule 데코레이터의 차이점은 무엇입니까? 그들은 똑같은 일을하고 있습니까? 그렇게 생각하지 마십시오.

답변처럼 makeDecorator 기능을 사용하지 않고 Component Decorator를 다시 작성하기 위해 수행해야 할 작업을 단계별로 설명하는 것이 좋을 것입니다.

UPD : 그리고 예, 물론 TypeScript Decorator의 작동 방식을 알고 있습니다.

Answer 1

그러나 저는 더 깊이 가서 더 많은 메타 데이터를 제공하는 것을 제외하고 Component decorator가 실제로 무엇을하는지 알고 싶습니다.

왜 더 많은 기능이 필요합니까? 장식자 함수 @Component에 전달 된 인수는 구성 요소 , 메타 데이터입니다. 메타 데이터를 제공하는 것이 주요 책임입니다.

1. 는 reflect-metadata 설치에

   가장 쉬운 방법, 당신이 비슷한을 재현하려는 경우입니다.

   npm install --save reflect-metadata 
   

2. 은 할, 당신은 메타 데이터를 얻을 필요가있을 때 ¹

   import 'reflect-metadata'; 
   
   interface MyComponentMetadata { 
       template?: string; 
       selector?: string; 
   } 
   
   function MyComponent(metadata: MyComponentMetadata) { 
       return function(ctor: Function) { 
       // add metadata to constructor 
       Reflect.defineMetadata('annotations', metadata, ctor); 
       } 
   } 
   

3. 지금 그것을

   @MyComponent({ 
       selector: 'component', 
       template: '<hello></hello>' 
   }) 
   class HelloComponent { 
   } 
   

4. 을 사용하여 장식 기능을 작성

   let metadata = Reflect.getMetadata('annotations', HelloComponent); 
   

메타 데이터의 목적은 클래스에서 수행 할 작업을 알기위한 정보를 제공하기위한 것입니다. 따라서 데코레이터는 메타 데이터 공급자 이상의 것이 될 필요는 없습니다. Angular는 데코레이터 기능이 아닌 메타 데이터로 수행 할 작업을 결정합니다.

₁

---

- 참고 TypeScript documentation on decorators