[4.0.0-rc.0] ion-tabs lifecycle events not working when navigating back from another view #16834
Comments
paulstelzer
added
needs: investigation
package: angular
|
Please use ionViewDidEnter(), it will trigger if you navigating back to the previous screen. |
|
@rikenpatel20 doesn't work in a tabbed view though :( |
|
Is there a known workaround for tabbed pages yet? |
|
Still not working in 4.12.0 |
|
Same here: My Any idea when this issue will be investigated? The only thing that comes to my mind right now is checking the url for a hardcoded one and using that as a trigger. |
|
Any update on this??? I have the same issue. When I am coming back to a page with
ionViewDidEnter does not fire . |
|
@brandyscarney thank you. There are 10-20 tickets related to this problem already. And since last year. |
|
Hi everyone, I am working on a fix for this issue and have released a nightly build of Ionic ( We appreciate your patience as we work to resolve this issue. Thanks! |
|
Thank you @liamdebeasi. I will test it later today and post my feedback. |
|
I get some weird looking warnings when installing With this version the My personal guess is that it does have to do with the error/warning above. On the positive side: If I go back to So I guess taking care of the regression bug is the next challenge. If you manage to create another fix dev build I will gladly test it. |
|
Hmm sounds like a weird dev build. I'll try to push another one out. Thanks! Glad the main issue is resolved at least! |
|
Ok published another nightly I double checked the old one, and I was able to get those same warnings, but am no longer getting it with this new build. |
|
The compile warnings are gone now. thumbsup However the back link issue still persisted.
|
|
Can you post a code example of the back button link issue? |
|
It affects all of my back buttons. Example back button code with id. .oO( I am aware that this is not a standalone stackBlitz of the issue. I just want to provide you with some quick issue code context. ) If that does not help I can go about creating a Stackblitz example of the issue in isolation. |
|
Ah ok I am seeing that now; We don't officially support StackBlitz for Ionic 4, but it's something we are working on! 🙂 |
|
Hi there, Thanks for all the feedback so far! I have pushed a new nightly build that fixes this issue. |
|
Perfect you solved all of my use cases. cheer |
For me also problem is fixed after I have added your patch ... Thank you! Please roll this into main version asap. |
|
@gelinger777 as far as I know this is already included in the newest official release. |
|
Hi there, Please see this comment: #16834 (comment). We are investigating a fix, but do not currently have an ETA. |
|
Hi there, Thank you for a quick response. Once you guys investigate the fix and have the ETA, please do share with us on this thread because we need to reveal the ETA to our clients since our app is in production. Thanks, |
Just tried your build too and it seems to be working fine for me too. Hope your team can greenlight your changes into the main project soon. =) Thanks for the fix! |
|
NOT WORKING!!!!!! |
Hi~ |
Is this resolved? I still see ionviewdidenter is not triggering in tabs view. Ionic: Ionic CLI : 5.4.2 (C:\Users\merugusr\AppData\Roaming\npm\node_modules\ionic) Utility: cordova-res : not installed System: NodeJS : v10.9.0 (C:\Program Files\nodejs\node.exe) |
|
You need to add that event on the tabs parent controller. It fires off on that controller |
nope , this isn't working though I add this life cycle either in tabs or home page. I am navigating using this.router.navigate(['tabs/tabs/home']); from one page to the tabs home page and I need life cycle events on home to trigger so that home template gets updated. |
|
@liamdebeasi works like a charm! Thanks :) |
Thanks for your solution... Works smooth for me 💃 |
Solved as described in ionic-team/ionic-framework#16834 (comment) Signed-off-by: Xavier Figueroa <xavierfigueroav@gmail.com>
|
@liamdebeasi Thanks for the fix. It works perfectly in Ionic 4. |
|
Hello all and @liamdebeasi, I have already updated the Ionic and Angular to the latest version but I still can see following bug: When I leave the parent tab page to the root login page, for example user clicked in the logout button in tab button, the ionic lifecycle is only triggered in the parent tab component but not in the current tab child being displayed. Thank you very much. |
|
Hi all, @liamdebeasi any updates on that topic? It is still present in My current workaround looks like the following: Create an interface with the hooks you want to be implemented in your child tabs
export interface Tab {
tabsWillEnter();
tabsDidEnter();
tabsWillLeave();
tabsDidLeave();
}Listen to tab changes and lifecycle hooks in your parent tab and forward them to your child tabs
<ion-tabs #tabs>
...
</ion-tabs>
export class TabsPage implements OnInit, OnDestroy {
@ViewChild('tabs', { static: true }) tabs: IonTabs;
private subs = new Subscription();
private currentTab: Tab;
private tabsDidEnter = false;
constructor() { }
ngOnInit() {
const tabSub = this.tabs.ionTabsDidChange.subscribe(() => {
this.currentTab = this.tabs.outlet.component as Tab;
});
this.subs.add(tabSub);
}
ionViewWillEnter() {
if (this.tabsDidEnter) { // Do not fire on initial load - ionViewWillEnter of child tab will fire
this.currentTab.tabsWillEnter();
}
}
ionViewDidEnter() {
if (this.tabsDidEnter) { // Do not fire on initial load - ionViewDidEnter of child tab will fire
this.currentTab.tabsDidEnter();
}
this.tabsDidEnter = true;
}
ionViewWillLeave() {
this.currentTab.tabsWillLeave();
}
ionViewDidLeave() {
this.currentTab.tabsDidLeave();
}
ngOnDestroy() {
this.subs.unsubscribe();
}
}Implement the Tab interface into your child tabs
export class Tab1Page implements Tab {
constructor() {}
ionViewWillEnter() { }
ionViewDidEnter() { }
ionViewWillLeave() { }
ionViewDidLeave() { }
tabsWillEnter() { }
tabsDidEnter() { }
tabsWillLeave() { }
tabsDidLeave() { }
} |
|
Still not working in 5.0.7. |
|
still doesn't work in 6.3.0.. are there any workaround for this? |
|
I am having this problem and post help at forum but got nothing at all. |
|
Please find a reproduction here: https://github.com/ehorodyski-ionic/ng-nested-tab-nav How to Reproduce:
Note that The React flavor can be found here: https://github.com/ehorodyski-ionic/react-nested-tab-nav and works as expected. |
|
Hi everyone, I wanted to provide an update regarding the status of this issue. After discussing with the team, we have determined this is not a bug in Ionic Framework; however, we realize there are valid use cases in which developers may want to listen for lifecycle events on an individual tab. Due to this, we have provided a temporary workaround as well as plans for further development. Why is this not a bug? When pages transition in Ionic Framework, they fire lifecycle events. For example, going from The reported issue occurs when navigating between For many users, this is unexpected because Tab1 visually appears to transition away. However, under the hood, the entire tabs context transitions away. What is the workaround? Luckily, there is an easy to use workaround for developers who wish to listen for lifecycle events on individual tab pages: tabs.page.html <ion-tabs #tabs (ionTabsDidChange)="tabChange(tabs)">
...
</ion-tabs>tabs.page.ts import { Component } from '@angular/core';
import { IonTabs } from '@ionic/angular'
@Component({
selector: 'app-tabs',
templateUrl: 'tabs.page.html',
styleUrls: ['tabs.page.scss']
})
export class TabsPage {
private activeTab?: HTMLElement;
constructor() {}
tabChange(tabsRef: IonTabs) {
this.activeTab = tabsRef.outlet.activatedView.element;
}
ionViewWillLeave() {
this.propagateToActiveTab('ionViewWillLeave');
}
ionViewDidLeave() {
this.propagateToActiveTab('ionViewDidLeave');
}
ionViewWillEnter() {
this.propagateToActiveTab('ionViewWillEnter');
}
ionViewDidEnter() {
this.propagateToActiveTab('ionViewDidEnter');
}
private propagateToActiveTab(eventName: string) {
if (this.activeTab) {
this.activeTab.dispatchEvent(new CustomEvent(eventName));
}
}
}In this example we do 2 things:
Future Work For future major releases of Ionic Framework, we are investigating bringing Ionic Angular routing closer to what Ionic React does. This would involve each Ionic page having a root With this approach, the router sees a page transitioning in and a page transitioning out but does not care which router outlet each page is part of. This would be a breaking change in Ionic Angular as the root tab page would no longer fire lifecycle events. Please note that this has not been finalized, and the implementation details may change. We are actively discussing the best way to do this while weighing the pros and cons of the implementation. Please let me know if there are any questions. For any additional bugs, please open a new issue. Thank you! |
|
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
and others
Bug Report
Ionic version:
[x] 4.x
Current behavior:
I have some items/cards on my tab pages and navigate to other pages when I click on them. When I go back to the tabs pages from those views, my lifecycle events like
ionViewDidEnter()do not fire. They fire when I'm changing tabs, but when I am coming from a non-tab view, they never fire.Expected behavior:
For these lifecycle events to fire.
Steps to reproduce:
Create a tab project, navigate to another view from a tab page that isn't another tab, go back to the tab page and see that they have not fired.
Ionic info:
The text was updated successfully, but these errors were encountered: