본문 바로가기
Study Note/Angular

Angular #Lifecycle sequence

by 시뮝 2019. 10. 31.
728x90

HookPurpose and Timing

ngOnChanges()

Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.

Called before ngOnInit() and whenever one or more data-bound input properties change.

 

Angular가 데이터 바인딩 된 입력 속성을 설정할 때 응답합니다. 이 메소드는 현재 및 이전 특성 값의 SimpleChanges 오브젝트를 수신합니다.

 

ngOnInit () 전에 호출되고 하나 이상의 데이터 바인딩 된 입력 속성이 변경 될 때마다 호출됩니다.

ngOnInit()

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties.

Called once, after the first ngOnChanges().

 

Angular가 먼저 데이터 바인딩 된 속성을 표시하고 지시문 / 구성 요소의 입력 속성을 설정 한 후 지시문 / 구성 요소를 초기화하십시오.

첫 번째 ngOnChanges () 후에 한 번 호출됩니다.

ngDoCheck()

Detect and act upon changes that Angular can't or won't detect on its own.

Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

 

Angular가 자체적으로 감지 할 수 없거나 감지 할 수없는 변경 사항을 감지하고 수행하십시오.

ngOnChanges () 및 ngOnInit () 직후에 모든 변경 감지 실행 중에 호출됩니다.

ngAfterContentInit()

Respond after Angular projects external content into the component's view / the view that a directive is in.

Called once after the first ngDoCheck().

 

Angular가 외부 컨텐츠를 컴포넌트의 뷰 / 지시문이있는 뷰에 투영 한 후 응답합니다.

첫 번째 ngDoCheck () 후에 한 번 호출됩니다.

ngAfterContentChecked()

Respond after Angular checks the content projected into the directive/component.

Called after the ngAfterContentInit() and every subsequent ngDoCheck().

 

Angular가 지시문 / 컴포넌트로 투영 된 내용을 확인한 후 응답합니다.

ngAfterContentInit () 및 이후의 모든 ngDoCheck () 이후에 호출됩니다.

ngAfterViewInit()

Respond after Angular initializes the component's views and child views / the view that a directive is in.

Called once after the first ngAfterContentChecked().

 

Angular가 구성 요소의 뷰와 자식 뷰 / 지시문이있는 뷰를 초기화 한 후 응답합니다.

첫 번째 ngAfterContentChecked () 이후 한 번 호출됩니다.

ngAfterViewChecked()

Respond after Angular checks the component's views and child views / the view that a directive is in.

Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked().

 

Angular가 구성 요소의 뷰와 자식 뷰 / 지시문이있는 뷰를 확인한 후 응답합니다.

ngAfterViewInit () 및 이후의 모든 ngAfterContentChecked () 이후에 호출됩니다.

ngOnDestroy()

Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks.

Called just before Angular destroys the directive/component.

 

Angular가 지시문 / 구성 요소를 파괴하기 직전에 정리하십시오. 메모리 누수를 피하기 위해 Observable을 구독 취소하고 이벤트 핸들러를 분리하십시오.

Angular가 지시문 / 구성 요소를 파괴하기 직전에 호출됩니다.

출처 : https://angular.io/guide/lifecycle-hooks

728x90

댓글