Issue
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:
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.
The problem is the root page is not refreshed. I cant find the root caused of this problem..
home-tabs.router.module.ts:
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:
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();
});
}
Answered By - Snowbases
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.