Comments (8)
Thanks for the issue! This issue has been labeled as needs reproduction
. This label is added to issues that need a code reproduction.
Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.
If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.
For a guide on how to create a good reproduction, see our Contributing Guide.
from ionic-framework.
Added code reproduction, but I guess if u are requesting me that, implies that lifeclycle should work on ionNav
from ionic-framework.
Thank you for the reproduction, and apologies for the delay. We ask for a repro in order to better understand the problems you're running into. Routing-related issues in particular can get complicated, so it's best to see the code directly.
The lifecycle events you've linked to are specific to routing (mapping URL paths to pages), which IonNav
is not meant to be used for. (This is described at the top of the Nav docs.) The lifecycle events are not expected to fire when pushing ExploreContainer
in an IonNav
. IonNav
does have its own lifecycle events, which you may find useful: https://ionicframework.com/docs/api/nav#events
However, I would expect the lifecycle events to fire when landing on or leaving the /nav-bug
path, since that triggers a routing change on the Outside
view. This is not currently happening because Outside
does not use the IonPage
component, which is required for routing. If I wrap Outside
in <IonPage></IonPage>
, the lifecycle hooks fire as expected.
Can you try the IonNav
events and/or wrapping your views in IonPage
and let me know if that works for your use case?
from ionic-framework.
Yes, the events are working, the problem is that i don't have a simple way to know when a component pushed by a nav is active or not. With the route's lifecycles that would be easy to do, but without it is nearly impossible.
For example, if i want to handle the hardware back button on each view differently with the current tools seems impossible because the "mounted" nav components that are hidden will be also listening to the back button and this will lead to unwanted behaviors. (With router lifecycles i could subscribe in the ionViewWillEnter and unsubscribe in the ionViewWillLeave)
from ionic-framework.
If the ionNavWillChange
event included what component is entering, would that solve things for you? Currently it doesn't emit any detail.
from ionic-framework.
Yes, i think it could solve it, but it would be a lot better if you could do something like the useIonViewWillEnter/Leave
methods that can be used inside the components. That would be much cleaner.
I think that if you could know wich component is on view and wich isn't because of the ion-page-hidden logic. You could do what i said before, i'm correct?
from ionic-framework.
I spoke with the team on this, and there are a couple of other solutions that may work better:
- Using
IonNav
's existinggetActive
method to determine the active view. This could be done in your hardware back button listener, for example, to customize the logic. - Whenever a new component is pushed to the nav, register its hardware back button handler using a higher priority than the last (such as by using a private variable that gets incremented each time). Only the highest priority handler will be called by default. You can see more info in the hardware back button docs: https://ionicframework.com/docs/developing/hardware-back-button
Can you let me know if either of these work for your use case, and if neither of them do, why not? I want to make sure any features we add will solve your use case without needing extra unneeded APIs.
from ionic-framework.
I tried the first but didn't succeed because i didn't know how to do the comparition between the getActive
view and the components to know if they were visibles or not.
The second one may work, i didn't tried it, but i found it a bit hacky. It is like i have clean and simple solutions for routing but with nav i have to do things that aren't elegant or simple, and can lead to bugs, but it is okay, if you don't want or can't adds this features i will find a workaround.
But i want to leave my opinion that routing in react is the weakest part of ionic by far, and with nav that could have change a bit if at least has the same lifecycles hooks that routing has.
from ionic-framework.
Related Issues (20)
- bug: ion-backdrop visible=false not working HOT 1
- bug: IonRouterOutlet missing the properties onPointerEnterCapture, onPointerLeaveCapture HOT 4
- bug: Angular 17 and Ionic 7 - SSR issue HOT 3
- bug: IonRouterOutlet | Type '{ children: Element[]; }' is missing the following properties from type 'Pick<IonRouterOutlet & { basePath?: string | undefined; ref?: Ref<any> | undefined; ionPage?: boolean | undefined; } & IonicReactProps & Omit<...>, keyof IonicReactProps | ... 253 more ... | "ionPage">': onPointerEnterCapture, HOT 1
- bug: Filled Input changing the centered vertically of label when switch font-family css HOT 3
- bug:test
- bug: autocapitalize is required in IonSearchbar types HOT 3
- Where is the dist folder containing code on your CDN? HOT 1
- bug: ion-datetime Month Navigation Fails in RTL Mode" HOT 1
- feat: select, add errorText and helperText props HOT 1
- bug: Ionic 7+ Angular LoadingController with Http Interceptor Loader Present and Dismiss issue HOT 2
- bug: the labelPlacement attribute set to 'floating' does not function properly when buttons or icons are used within a ion text area. HOT 1
- bug: popover without ion-content not scrollable HOT 2
- feat: Support `input#list` HOT 1
- bug: Black text color on dark theme HOT 4
- bug: IonListHeader and IonButton inconsistent alignment HOT 5
- bug: [v7.8.1] angular standalone do not load correctly ionic componentes in production build HOT 2
- bug: window.Ionic.platforms returns ['mobile', 'mobileweb'] instead of ['desktop'] on chromium based browser HOT 1
- bug: Angular Standalone Components - Disabled IonSelect inside IonItem is not being fully disabled HOT 1
- feat: Style ion-accordion detail arrow HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-framework.