[JavaScript知识库]Angular -- Lifecycle Hooks

Angular?Doc Link

ngOnChange

Invoked first time?before?ngOnInit?AND whenever the data-bound input properties changes

• data-bound input: some data coming from outside components (parent component)
  • Uses "SimpleChange" object to keep track of current and past values

ngOnInit

Invoked when the component is initialized, called only once after the first ngOnChanges

• Good for initializations

ngDoCheck

called first time after?ngOnInit and?whenever after?ngOnChanges, used to detect and act on custom changes that cannot be detected by Angular

ngAfterContentInit

It gets called only once?after the first?ngDoCheck?hook. Handle the external data when it has just been projected into the component.

ngAfterContentChecked

It gets called first time after?ngAfterContentInit?and whenever?ngDoCheck is called. Handles data after Angular checks for external data projection.

ngAfterViewInit

Invoked only?once?after the first?ngAfterContentChecked() --?after Angular initializes the component's views and child views, or the view that contains the directive.

ngAfterViewChecked( )?It gets called first time after?ngAfterViewInit, and whenever ngAfterContentChecked().?It responds after the component's view, or the child component's view is checked.

ngOnDestroy

Invoked only once when the component is destroyed

• Good for clean-up logic