Angular

implementation

First of all, the implementation of hook functions need to be defined at the time of implementation of the corresponding interface

export class ListPage implements OnInit {
  constructor() {}

  ngOnInit() {
    // code here}}Copy the code

Call to order

  1. constructor

The constructor is executed first. Many variables such as @input and @viewChild do not exist when the constructor is executed. It is best to write the related operations in ngOnInit.

  1. ngOnChanges

Emitted when the binding value of the current component @input / @output changes.

Also, if @Input is an object, it will only fire if the reference changes.

  1. ngOnInit

Called after the first ngOnChanges has completed and will only be executed once

  1. ngDoCheck

Developer custom change detection.

  1. ngAfterContentInit

Executes once when the component content is initialized

  1. ngAfterContentChecked

The content projected to the component fires after each ngDoCheck call.

  1. ngAfterViewInit

Once the component and its child component views are initialized

  1. ngAfterViewChecked

The component and its child component views are fired after each ngDoCheck call.

  1. ngOnDestroy

Called before component destruction.

Pay attention to

  • Not all data exists in constructor; the @viewChild@viewChildren@input values are unbound

  • Any change detection triggers ngDoCheck, which is very performance intensive and should be used with caution

Ionic

The original document can be seen by clicking on the link above.

In addition to the lifecycle provided by Angular, ionic adds several events:

  • IonViewWillEnter The routing component is about to be displayed in the view
  • IonViewDidEnter The routing component is displayed in the view

IonViewWillEnter is triggered after ngOnInit and ionViewDidEnter is triggered after the transition effect of the page switch ends

  • IonViewWillLeave Component that is about to leave the current route
  • IonViewDidLeave Component that has left the current route

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

Components that use ion-nav or ion-router-outlet should not use an OnPush change detection strategy, which would result in lifecycle hooks like ngOnInit not being triggered. In addition, asynchronously changing data may not render correctly.

How does ionic handle the page lifecycle

Ionic uses the
route, which extends Angular’s
for a better experience on mobile devices.

Ionic stores old pages in the DOM and hides them from view when jumping from a page to a new one. This preserves the state of the previous page, such as scrolling position and page data, so that when you return from the new page to the previous page, there is no need to reload, and the page transition is smoother.

The page is not actually destroyed until it exits the stack, so ngOnInit and ngOnDestroy fire at different times than you might expect.

For example, if PAGE A is the details page, go to page B to modify data. After the modification, you can return to page A from page B.

If the data fetch method of page A is written in ngOnInit, then the return from B to A, because ngOnInit is not triggered, obviously does not meet the business requirements.

So the fetch of this data can be written in the ionViewWillEnter so that it can be triggered and updated when A is returned from B

Routing guard

IonViewCanEnter and ionViewCanLeave have been used in Ionic 3 to determine whether a page can be entered or left. They are usually used to restrict access or to prompt a second confirmation before leaving the edit page. These two functions are deprecated. Ionic 4 uses angular’s official route guard.