An article to quickly understand Angular and Ionic life cycle and hook functions

Angular

accomplish

First of all, there is no need to say much about the implementation method. Using the hook function requires implementing the corresponding interface when defining it

export class ListPage implements OnInit {
  constructor() {}

  ngOnInit() {
    // code here
  }
}

Calling order

1.constructor

The first thing to be executed is the constructor. When the constructor is executed, many variables such as @Input and @ViewChild do not exist. It is best to write related operations in ngOnInit.

2. ngOnChanges

It is triggered when the binding value of the current component @Input/@Output changes.
In addition, if @Input is an object, it will only be triggered if the reference changes.

3. ngOnInit

Called after the first ngOnChanges is completed. It will only be executed once.

4. ngDoCheck

Developer-defined change detection.

5. ngAfterContentInit

Executed once when the component content is initialized

6. ngAfterContentChecked

The content projected to the component is triggered after each ngDoCheck call.

7. ngAfterViewInit

Executed once when the component and its subcomponent views are initialized

8. ngAfterViewChecked

Fired after each ngDoCheck call on a component and its child views.

9. ngOnDestroy

Called before the component is destroyed.

Notice

• Not all data exists in the constructor, @ViewChild @ViewChildren @Input and other values ​​are not bound yet
• Any change detection will trigger ngDoCheck, see Very performance intensive, use with caution

Ionic

You can click the link above to see the original document, and I will highlight the key points.

The life cycle is shown in the figure. In addition to the life cycle provided by Angular, Ionic adds several events:

• ionViewWillEnter The routing component is about to be displayed in the view
• ionViewDidEnter The route component has been displayed to the view

ionViewWillEnter is triggered after ngOnInit, and ionViewDidEnter is triggered after the transition effect of page switching ends

• ionViewWillLeave The component that is about to leave the current route
• ionViewDidLeave The component that has left the current route

ionViewWillLeave is called first, and ionViewDidLeave is not called until the transition to the new page is successful (after the new page ionViewDidEnter is triggered).

Components using ion-nav or ion-router-outlet should not use the OnPush change detection strategy, which will cause lifecycle hooks such as ngOnInit to fail to trigger. Additionally, asynchronously changing data may not render correctly.

How does ionic handle the life cycle of a page?

The routing outlet used by ionic is <ion-router-outlet />, which extends angular's <router-outlet /> and can provide a better experience on mobile devices.

When jumping from one page to a new page, Ionic saves the old page in the DOM and hides it from view. This can maintain the status of the previous page, such as the scroll position and page data, so that when you return to the previous page from the new page, you do not need to reload it, and the page transition is smoother.

The page is only destroyed when it exits the stack, so the timing of ngOnInit and ngOnDestroy triggering may not be what you imagine.

For example, A is the details page, and you go to page B to modify the data. After the modification is completed, return to page A from page B.
If the data acquisition method of page A is written in ngOnInit, then when returning from B to A, ngOnInit will not be triggered, which obviously does not meet business requirements.
So the acquisition of this data can be written in ionViewWillEnter, so that it can be triggered and updated when returning from B to A

Route Guard

Ionic 3 used to have two hook functions, ionViewCanEnter and ionViewCanLeave, which were used to determine whether a page could be entered/left. They were generally used to restrict access rights or to pop up a secondary confirmation prompt before leaving the editing page. These two functions have been deprecated. Ionic 4 and later use Angular's official routing guard.

Summarize

This is the end of this article about Angular and Ionic life cycle and hook functions. For more relevant Angular Ionic life cycle and hook function content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!