[AngularJS 2.0] App Lifecycle

링크에서 내용 찾아보세요.

https://mayajuni.github.io/2016/10/21/angular2-lifecycle-hooks/

ngOnInit 

angular가 data bound input property 초기화한 후 directive/component 초기화

ngOnInit is invoked after the component is constructed and is the best place to initialize property values.

constructor와 비슷하지만 시점의 차이가 있다. 참고

Timing : after the first ngOnChanges.

ngOnChanges

angular 가  data bound input property를  설정 한 후 respond, 즉 input property(@input)의 값이 변경 되었을 때 실행

parameter 값으로는 SimpleChange를 받음

현재 및 이전 값의 변경된 object를 받는다.

OnInit보다 한번 먼저 실행됨

Onchanges는 immutable한 객체에서만 반응

Timing : before ngOnInit and when a data-bound input property value changes. / 클릭이나 어떤 동작에 의한 변경

ngDoCheck

OnChanges와 달리 input property 뿐만 아니라 모든 property의 변경을 감지 및 act 한다. Called every change detection run.

최초 OnChanges가 실행되고 나서 DoCheck 실행 ( OnChanges -> DoCheck -> OnInit )

Timing : during every Angular change detection cycle.

ngOnDestroy

directive/component를 없애기 전에 정리한다. 메모리 누수를 방지할 수 있다.

Unsubscribe observables and detach event handlers to avoid memory leaks.

Timing : just before Angular destroys the directive/component.

ngAfterContentChecked

Component content has been Checked

After Angular checks the bindings of the external content that it projected into its view.

Timing : after every check of projected component content

AfterContentInit

Component content has been Checked, 외부의 component를 불러오고 나서 최초 1회 실행. ng-content로 외부 component 불러 올때 등

AfterViewInit

Component의 view와 하위 component의 view가 초기화 된 후 최초 1회 실행.

AfterViewChecked

component외 view와 하위 component의 view가 초기화된 후 모든 변화에 대해 실행.

View 뿐만 아니라 property 변경, function 실행 등

[순서]

Onchanges -> onInit -> DoCheck -> AfterContentInit -> AfterContentChecked -> AfterViewInit -> AfterViewChecked(하면서 변경 감지시 OnChanges) -> onDestroy

[ angular API Reference]

https://angular.io/docs/ts/latest/api/core/index/OnInit-class.html

[ angular LifeCycle Example]

http://learnangular2.com/lifecycle/

[ Hook ]

http://jinuine.blogspot.kr/2014/05/hooking-hooking.html

여긴다른얘기..

나의 상황

html 템플릿, jquery를 받고 angular에 붙여야 했다.

html 붙이고  jquery 동작을 하기 위해서 이벤트를 컴포넌트 쪽에 주고 jquery를 실행 해야 함.

declare var $ : any;

로 jquery의 $ 사용가능하게 하기