티스토리 뷰
링크에서 내용 찾아보세요.
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 실행 등
[ 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의 $ 사용가능하게 하기
'AngularJS 2.0 > + ANgularJS 2.0' 카테고리의 다른 글
observable 관련 (수정중) (0) | 2016.09.06 |
---|---|
ng2-translate 2.2.2 (0) | 2016.08.25 |
TypeScript (0) | 2016.08.03 |
[AngularJS 2.0] App Lifecycle (0) | 2016.08.03 |
[AngularJS 2.0] Angular 용어 정리 (0) | 2016.07.28 |
[AngularJS 2.0] 개요 & 기초 추천 페이지 (4) | 2016.07.20 |
- TAG
- 2.0, angular 용어, angularjs, angularjs 2.0, app lifecycle, component, Dependency Injection, DI, Framework, front, front end, htp 통신, http, Injection, LifeCycle, MVC, mvw, navitagion, ngonchanges, ngondestroy, ngoninit, ondocheck, Router, routing, Service, tutorial, Web, 라우팅, 생명주기, 앵귤러, 용어, 용어정리, 튜토리얼
- Total
- 128,897
- Today
- 9
- Yesterday
- 130
- resolve
- Dependency Injection
- javascript
- Web
- MVC
- 해결
- angularjs
- 원인
- 개발자
- front end
- database
- java
- jquery
- 라우팅
- 오류
- navitagion
- error
- 앵귤러
- http
- 문제
- Framework
- front
- MySQL
- 오류관리
- routing
- angularjs 2.0
- 2.0
- db
- 오류해결
- DI