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.
Related
I have a Home Page, inside that I have created one component RecentlyViewedProductComponent.
My problem is:
when I navigate to /home by using
this.router.navigate(['/home']);
the ngOnInit() inside RecentlyViewedProductComponent is not working. When I close the app and open it again, that only it is working .
How to solve this problem?
It sounds like you are not using the right lifecycle event.
Have you looked at the documentation here:
https://ionicframework.com/docs/angular/lifecycle
It says that ngOnInit() is:
Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once.
If you want it to be called every time you navigate to the home page then you want to replace this with something like ionViewWillEnter():
Fired when the component routing to is about to animate into view.
There is actually some guidance at the end of the docs page that you might find interesting which explains when to use each life cycle method.
I have a simple Ionic v1 app that displays a list of items. Clicking on an item navigates the user to a new view displaying info about the item.
If the user selects a second before the first item is loaded, the app will navigate to both views respectively, which is an issue.
Is there a way to prevent this via an ionic config or angular?
Note I am using Ionic Native Transitions, but this issue seems to be independent
*Edit * I know I can use something like a 'loading' modal to prevent clicks, but then I'll have to do this for every single list in the application that loads data, so that doesn't sound ideal
I ended up utilizing inoicNativeTransition.beforeTransition in order to render a modal-style backdrop that prevents users from clicking for 300ms
$rootScope.$on('ionicNativeTransitions.beforeTransition', function(){
$rootScope.stateTransitioning = true;
$timeout(function(){
$rootScope.stateTransitioning = false;
}, 300)
});
HTML
<div ng-show="stateTransitioning === true" id="inivisible-backdrop"> </div>
I don't hide the backdrop on the success of the transition, because there seems to be an inconsistent lag between when the view is changed and the transition is marked as 'successful'. 300ms seems to work just fine
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 can one change the default button icon of the SplitApp master view?
Let's say I want to use this icon instead of the default:
"sap-icon://filter"
I was trying setHomeIcon property of SplitApp but it did not work.
Here is jsbin example, which I found. It would be nice to change icon there. Thanks for any hint.
The icon you would like to customize belongs to the master button of the SplitContainer which is the base for the SplitApp.
SplitContainer does not provide an API for setting the masterButton icon. However you can register for the master button event and obtain the button there. This works only with the following conditions:
You need to prepend the view ID to the SplitApp control ID using this.createId("mySplitApp"). If you use XML views this is done automatically.
You rely on the naming of the button. If SAP decides to change the name this won't work.
The following event handler implementation will do the job:
oSplitApp.attachMasterButton(function(event) {
if (event.getParameter("show")) {
const button = this.byId(this.createId("mySplitApp-MasterBtn"));
if (button) {
button.setIcon("sap-icon://filter");
}
}
}, this);
The example can be found here.