앵귤러 강의 정리

회사 업무중 앵귤러를 다뤄야하는 프로젝트가 생겨 아래 강의를 듣고 정리합니다.

https://www.inflearn.com/course/Angular/dashboard

[무료] Angular(2+) Front에서 Back까지 - Nest js를 알려면 Angular 모듈을 알아야한다! - 인프런 | 강의

 

@Input

// 리액트로 치면 Props 에 대응되는 개념인 듯.
@Component(...)
class MyComponent {
    @Input test: string;
}

// 외부에서는 []=으로 입력
<my-component [test]="helloworld"/>

 

@Output

// 흔히보는 event dispatcher
@Component(...)
class MyComponent {
    @Output myEvent: new EventEmitter();
}

// 외부에서는 ()=으로 입력
<my-component [myEvent]="myEventListener($event)"/>

 

생명 주기

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked
• ngDestroy

 

ngOnChanges

 

• 앵귤러 컴포넌트의 Lifecycle 중 하나
• @Input 데이터가 변경될 경우 실행됨

 

 

앵귤러 모듈시스템

• delcaration: const, 컴포넌트를 생성, 앵귤러 모듈이 컴포넌트를 사용할 수 있겠끔 함. (하나의 컴포넌트는 하나의 모듈에만 선언될 수 있음.)
• exports: 컴포넌트를 노출
• imports: 모듈을 import

 

router-outlet

• app-routing-module 에 의해 match 되는 컴포넌트가 보이는 부분
• RouterModule.for(~): 이런 path 일 때 router-outlet 에 ~ 을 보여줘라

 

라우팅

1. [routerLink]: RouterModule 을 import 할 때 사용할 수 있는 anchor attribute
2. Router 를 주입받아 router.navigateByUrl 을 사용

 

메소드 바인딩

• {{메소드}}
• 메소드 바인딩은 비추천.
• 성능에 영향을 줌.

 

서비스

• @Injectable: 서비스를 정의

 

서비스 주입 방법

• 방법 1. @Components({providers}) 상위 레벨에서만 의존성 주입을 해주는지 확인.
• 방법 2. @NgModule({providers}) Component 레벨의 providing 은 서비스를 계속 생성하게됨. Module 수준으로 관리하여 서비스를 독립적으로 유지가능.
• 방법 3. @Injectable({providedIn}) 특정 모듈에 서비스를 주입 시켜 놓음. (권장)

 

Injector 의 검색순서

1. 자신의 컴포넌트
2. 부모 컴포넌트
3. 루트 컴포넌트 까지 계속 부모-자식 관계를 타고 올라감
4. 루트 모듈
5. 하위 모듈
6. 자신이 속한 모듈까지 계속 내려옴

결과적으로 가장 먼저 만나게되는 inject 되는 값을 사용하게됨.

 

ng-content

props.children 에 대응되는 값인 듯