Ionic 4 and the Lifecycle Hooks

原文： https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864

 

--------------------------------------------------------------------------------------------

There are a lot of questions related to Ionic 4 and the Lifecycle Hooks. There are new issues at the Ionic Github Repository where people complain that the Lifecycle Hooks are not working. So I will tell you in this article when the Lifecycle Hooks are running in Ionic 4.

For example:

When I navigate from the home to another route, the lifecycle ngOnDestroy of the home component is not executed

But why? Let’s start how Lifecycle Hooks working in Ionic 4!

TL;DR

added a short summary ;)

Ionic 4 uses the Angular Lifecycle Hooks

at the official documentation!

Short recap: How it was in Ionic 3

Ionic Blog you find a very good post about it and the following image which shows the lifecycles very good:

 

 

Ionic 3 lifecycle — Source: blog.ionicframework.com

Are these lifecycles still working?

ngOnInit now).

ionViewDidLeave are still very nice, but more about it later!

Ionic 4 and ion-router-outlet

<router-outlet></router-outlet> in your app.component.html and a

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

in your app.module.ts.

<router-outlet></router-outlet> with the Ionic 4 components, but the Ionic team added a special feature to it:

A “stack” functionality like in Ionic 3

Okay! And what does this mean?

Normally if you switch from one route to another in Angular, the components will be destroyed immediately. The Ionic router keeps the components (Ionic calls it pages — I like this terminology) in a stack. They are not destroyed by default.

Show me in practice

Enough theory, let’s see how it works in practice. I created a new project based on the starter package of Ionic and created two new pages: ListPage and ListItemPage. ListPage contains a list of items and if I tap on a item, I will redirect to the ListItemPage.

 

Lifecycle in Ionic 4

The GIF above shows a lot of details, so I will guide you through it:

1. No ngOnDestroy! But this is not a bug!

Here is the source code. I am using NavController from Ionic (navigateForward() is the same like router.navigate() )

gotoItem() {
  // navController is instanceof NavController from '@ionic/angular'
  // the following is the same like this.router.navigate()  
  this.navController.navigateForward(['/list-item']);
}

ngOnDestroy ListItem’ in the console.

stack functionality. The ListPage is still in our DOM, it’s not visible because it’s behind the ListItemPage. If I navigate backward, the ListItemPage will be destroyed (removed from the stack — also removed from DOM).

In short: Whenever you wonder, why ngOnDestroy is not firing, just take a look at the DOM inspector and you will see that the component is still there. It’s not destroyed yet, so ngOnDestroy is not firing!

ngOnInit will not be triggered because the component was already initialized.

And when I want to destroy ListPage ?

navigateRoot() of the NavController!

gotoItem() {
  this.navController.navigateRoot(['/list-item']);
}

If you execute this now, ngOnDestroy will be triggered, the component will be removed from DOM. It’s not added to the stack.

And what about ion-tabs?

ionViewWillEnter ).

ngOnDestroy lifecycle hook.

this issue at GitHub to follow that process.

Summary: Lifecycles in Ionic 4

Okay Paul, nice background information, but what should I memorize?

1. Ionic 4 extends the Router Navigation of Angular
2. Ionic 4 introduces a stack functionality (like in Ionic 3)
3. ngOnDestroy
4. ngOnInit) and the two nav guards all Lifecycle hooks from Ionic 3 are still available
5. ngOnInit will not be triggered, if you come back to a page after putting it into a stack
6.  will be triggered. Only if you set the new page as root (navController.navigateRoot())) or you navigate backwards, it will be removed from stack
7. ionViewDidEnter
8. Take a look at the DOM inspector, there you can see that your page is still in the stack
9. If you use the Angular Router, pages will add to the stack. I recommend to use the Ionic Angular NavController because here you can use the new stack functionality
10. see this issue at Github)

Do you have more questions or I write something not correctly, just let me know and post a comment!