Search code examples
angularionic-frameworkionic4

Ionic 4 ionViewDidEnter() didnt triggered after navigated from ion-back-button

I'm having stuck with Ionic apps. My problem is I want to refresh the root page after navigated from the other page by clicking the ion-back-button, I'm trying to use the ionic lifecycle events.

Anyone having issues with the ionViewDidEnter() too (like in my case)? As I know these lifecycle event function, it’s fired when entering a page, before it becomes the active one.

This is DOM elements when the QR page become active:

enter image description here

As you can see there are 2 pages inside <ion-router-outlet>. In my situation, the <app-home-tabs> is the root page. To navigate to the <app-my-qr> page from the root page, I use this.router.navigateByUrl('/my-qr', and then after I click <ion-back-button>, it's removed from the DOM.

enter image description here

The problem is the root page is not refreshed. I cant find the root caused of this problem..

home-tabs.router.module.ts:

enter image description here

Solution

  • After a couple of days, I found the root caused and the solution. Actually the problem is the child component won't refresh/reload... there is a child component <app-home> from (home.page.ts) inside the <app-home-tabs> which is can be seen inside the DOM elements.

    The ionViewWillEnter() is not triggered in the child components (home.page.ts).

    home-tabs.router.module.ts:

    enter image description here

    After just put this function inside the parent component, which is the home-tabs.page.ts, <app-home-tabs>. It calls the child component to force update itself. Just using the import { Events } from '@ionic/angular';

    Parent component:

    async ionViewDidEnter() {
    // This will be called everytime the page become active
    console.log('UpdateHome');
    this.events.publish('UpdateHome');
    ...
}

    And inside the child component:

    ionViewWillEnter() {
  this.events.subscribe('UpdateHome', async () => {
      console.log('UpdateHome');
      // Update itself
      let loading = await this.loadctrl.create();
      await loading.present();
      await this.getUser();
      this.menuCtrl.enable(true);
      await loading.dismiss();
  });
}