[Angular] 앵귤러의 decorators, 데코레이터 -ing

데코레이터의 종류

Class Decorators
1. @Component : 일반 클래스를 컴포넌트화

2. @NgModule : 개발해야될 컴포넌트 종류의 파일이 여러개가 되면 해당 파일을 관리할 부모같은 역할

모듈은 컴포넌트를 관리한다.
모듈은 여러개 존재 할 수 있으며 각각의 모듈은 각각 컴포넌트를 관리 한다.
메인 모듈이 존재하며, 메인 모듈은 imports를 통해 다른 모듈을 불러와 쓸 수 있다.
모듈에서 사용할 컴포넌트는 declaration에 추가해야 된다.
메인 모듈은 먼저 동작 할 메인 컴포넌트를 가질 수 있다. (bootstrap에서 선언)
@Component 데코레이터에 선언된 selector는 다른 컴포넌트에서 사용 될 수 있다.
@Component 데코레이터 속성에서 selector에 쓰여진 내용을 사용하고자 하는 컴포넌트의 *.html 파일에 테그형태로 입력하면 해당 컴포넌트가 생성 된다.
컴포넌트를 만드는 명령어 ng g component 이름
@Directive : custom directive를 정의(ngStyle, ngIf같은) HTML에 Angular가 간섭할 부분을 표시한다

3. @Injectable : : 자신의 아래에 정의된 클래스가 의존성 주입이 가능한(injectable) 클래스임을 나타낸다.

4. @Pipe : 문자열, 통화, 일자와 같은 데이터를 원하는 형태로 화면에 표시

Property Decorator
1. @Input : 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달
2. @Output : 주로 이벤트를 바인딩할때.
emit에서 내보낸 이벤트를 subscribe한데서 받는다
자식 컴포넌트에서 외부로 이벤트를 보내려면 EventEmitter 타입으로 선언한 프로퍼티에 @Output() 데코레이터를 사용해서 출력 프로퍼티로 지정합니다.

3. @View?
3. @ViewChild : 자식컴포넌트에서 사용된 변수나 메서드를 참조해서 사용하고싶을떄?
템플릿변수로는 부모컴포넌트 템플릿에서만 자식 컴포넌트를 참조할 수 있지만, 뷰차일드를 사용하면 부모컴포넌트의 클래스에서 접근이 가능하다
첫번째 인자에 컴포넌트 클래스를 정의하면 그 클래스와 매치되는 DOM요소를 찾고, 요소가 변경되면 해당 속성을 업데이트.
템플릿의 요소에 # 을 붙여서 해당엘리먼트를 가져올 수 있다. (참조변수)

(옵션 중 static 플래그에 대한 고찰 - 공식문서)
4. @ViewChildren : 가져올게 여러개일때.
5. @ContentChild
6. @ContentChildren
7. @HostBinding : 호스트엘리먼트에 있는 프로퍼티를 바꿀수 있다. (클래스 리스트와 같은) https://mingcoder.me/2018/07/23/Programming/Angular/angular-custom-directive/
메소드 데코레이터

8. @HostListener : 인자로 넘긴 이벤트를 받아들이는 function 데코레이터다. Host element에서 해당 이벤트가 발생하면 연결된 functions을 실행한다.
사용자 동작에 반응. onclick 같은 이벤트핸들러 같은 역할? 두번째인자는 파라미터, $event 예약어 => 여기에 해당하는 이벤트밸류를 실행하는 함수의 파라미터로 전달.
파라미터 데코레이터

9. @Inject : 주입할 대상의 정보를 선언. 클래스 타입인경우 앵귤러가 타입정보를 추론하여 자동주입?

Parameter decorator on a dependency parameter of a class constructor that specifies a custom provider of the dependency.

[부분설명1] "이것은 파라미터 데코레이터..." 이 말은 컴포넌트 클래스에 있는 생성자함수 constructor 의 파라미터로만 들어갈 수 있다. 이는 의존성 주입(DI) 이다.

[부분설명2] "컴포넌트 클래스의 생성자 함수의 파라미터" 이 말은 @Inject는 생성자 함수의 파라미터로써 위치를 가진다.

[부분설명3] "이 것은 커스텀 프로바이더(서비스)를 나타내는..." @Inject는 커스텀 프로바이더(서비스) 토큰을 직접 찾아 배정한다" 라고 한다. (링크)

보통 의존성 주입을 할때 컴포넌트 클래스 생성자 함수의 파라미터에 서비스를 넣는데, 컴파일하는 과정에서 생성자 함수에 넣은 서비스를 "타입"으로 제한하여 해석한다고 한다. 하지만 @Inject 를 사용하게 되면 "타입"이 아닌 토큰, 즉 값(객체)로써도 사용될 수 있도록 해준다고 한다.

즉, InjectionToken 을 사용하여 생성된 커스텀 프로바이더를 주입할 수 있도록 해주는 것!

 

 

※ @Inject와 @Injectable의 차이점?