Whenever I navigate to a page via Shell.Current.GoToAsync("Page"); the cross platform event "Appearing" is getting triggered in "Page".
The "Appearing" event is also getting triggered when I pop to "Page" via Shell.Current.Navigation.PopAsync();.
But when I push a page modal onto "Page" via Shell.Current.Navigation.PushModalAsync(new Page2()); and then pop this "Page2" with Shell.Current.Navigation.PopModalAsync(); in "Page2" then the "Appearing" event is not getting triggered in "Page".
Does someone know if this is intendet or if it is a Bug?
If this is not a Bug, is there a way to register when "Page" is Appearing or in focus again so I can do something then?
Steps to reproduce:
Shell.Current.GoToAsync("Page")
In "Page":
Shell.Current.Navigation.PushModalAsync(new Page2());
In "Page2":
Shell.Current.Navigation.PopModalAsync();
=> Lifecycle Event Appearing is not getting triggered in "Page".
It's not a bug, when you push a modal,alert or a popup (with community toolkit), the main page who invoke that it's still there, so you couldn't trigger appearing method.
Solution 1: EventTriggers
<ContentPage.Triggers>
<EventTrigger Event="LayoutChanged" >
YourTriggerThatFocusHere
</EventTrigger>
</ContentPage.Triggers>
Layout changed event is fired after and before you push a modal so you could use it in this way. And in your local trigger you set the focus on the control you want with "controlname".Focus()
Solution 2 (for MVVM) if you need to fire a command you could use eventToCommand behavior with the same layout changed event:
xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
<ContentPage.Behaviors>
<toolkit:EventToCommandBehavior EventName="LayoutChanged"
Command="{Binding YourCommand}" />
</ContentPage.Behaviors>
This is a bug, This is only a issue on Android, works fine on iOS.
Found out that it is an already registered Bug.
Github Ticket
Related
As part of the functionality of the app we are developing, when an android alarm is fired, a dialog box is to appear with an "Accept" or "Reject" button. Selecting reject does nothing, but selecting "Accept" triggers a callback from the plugin, which I have passed a function into. This function causes the ionic app to navigate to the root page of the app.
The issue I am having is, when I then navigate to another page after that where the user selects a value, and this value is displayed back to them and a button is enabled, the value display is not updating, and the button is not becoming enabled. Nothing seems to be updating.
What I have found is that pressing the back button on my android device will cause the page to update, which is not ideal.
This functionality works without the callback from the plugin.
What is happening here? And how do I fix it?
Passing the function into the plugin.
alarms_plugin.onAlarmRecieved = (alarmId) =>{
this.events.publish('alarmRecieved', alarmId);
}
Plugin-side functions
alarmRecieved: function(alarmId){
alarms_plugin.onAlarmRecieved(alarmId);
}
onAlarmRecieved: null
Navigating to root page on alarmRecieved
this.events.subscribe('alarmRecieved', (alarmId) =>{
if(alarmId != 'TIMEOUT')
this.nav.setRoot(HomePage);
});
Fix found by surrounding the this.nav.setRoot(HomePage) in this.zone.run(..).
Supposedly calling navigation within a subscription event causes issues like I was having.
I'm using this hook on my Home to get and store some data for my app.
In many articles and tutorials over the net is been sad the ionViewDidLoad hook will fire only ONCE after the view is cached.
But I tested switching pages with navCtrl.setRoot then go back to Home...
The ionViewDidLoad is called again. Did I understand it all wrong? Am I doing it wrongly? I should put a "test" before my commands on ionViewDidLoad?
Any help or explanation for this...
ionViewDidLoad does get called only per page creation. This view is cached when navigation occurs through push() i.e this page is still there in the stack. If navigation happens back to this page via pop(), the hook is not called again.
You are currently using setRoot() to test. This will clear the navigation stack i.e all views are in the current stack are destroyed. The current view is also destroyed when you call pop() on the current page.
Check View Creation and Lifecycle hook section in the docs
I need an event of page which is backed.
IonWillEnter or ionViewDiEnter events aren't fired when page is backed.
Ionic framework seems to show page simply when a back button is clicked.
Would you like to teach me?
Sorry for my poor English.
Thanks
For your info.. Ionic 2 lifecycle method
ionViewDidLoad - works the same way as ngOnInit, fires once when the view is
initially loaded into the DOM
ionViewWillEnter and ionViewDidEnter - hooks that are available before and after the page becomes active
ionViewWillLeave and ionViewDidLeave - hooks that are available before and after the page leaves the viewport
ionViewWillUnload - is available before the page is removed from the DOM
You should use ionViewWillLeave / ioniViewDidLeave to track the page back/close event
According to https://ionicframework.com/blog/navigating-lifecycle-events/
ionViewWillEnter: It’s fired when entering a page, before it becomes the active one. Use it for tasks you want to do every time you enter in the view (setting event listeners, updating a table, etc.).
ionViewDidEnter: Fired when entering a page, after it becomes the active page. Quite similar to the previous one.
So you can use any of above. I prefer ionViewDidEnter more in this scenario so screen render faster if you call any API.
How do I reload the content sitting under <ion-content> tag when back button is pressed?
The answer which is there is correct, however, it is outdated. Here is the updated answer.
Link to the Life Cycle just scroll down and you should see it.
Example:
ionViewWillEnter() {
console.log('Runs when the page is about to enter and become the active page.');
}
Just use a View Lifecycle Hook in the view you are going back you have to use for example:
onPageWillEnter() {
// You can execute what you want here and it will be executed right before you enter the view
}
Or you use a lifecycle hook on the page you are leaving then just replace onPageWillEnter() with onPageWillLeave()
With ionic beta 8 the lifecylcle events changed their names. Check out the official ionic blog for the full list of the lifecycle events.
Currently I am working on a project that relies heavily on modal dialogs. I'm using durandal's dialog plugin. The problem I have is that within a modal, a user can click an element which displays its details in another modal.
What I would like to do is to close all open modals before I open a new modal. Can anyone give me a good idea of how I can ensure only a single dialog is open at any given time in durandaljs?
Why not use Durandal's pub/sub, or a client-side message bus such as postal.js (which is what we use)? We close all modals by sending a close message over the channel 'app' and the topic 'app/modals'. Instead of holding a reference to an observable (which could have memory implications), we just hold a reference to the message channel (which is a string). Much cleaner way to go.
Ok so the issue I was facing was that I have various Modals, where one modal could be opened from within another modal. However I wanted the modals to close when another would open. The tricky part was that I am using widgets and click events to open the modals.
Since my project is an SPA it occurred to me to simply create a ko.observable - currentModal - on my global object and each new Modal closes the previous, then replaces the old with the new in currentModal(this);
I went even further and am now using the route objects to fire the Modals open as well. Durandal is fun.