Is there an event that fires afterPop() in Ionic2? Because in my case the ionViewWiillLeave does not serve me.
I have a Page1 that pushes Page2 and sends it parameters.
This Page2 has an array with a binding to his template. If I do pop() and then enter otherwise to Page2, double the contents of the array because it seems to be not automatically cleaned when exiting.
Then I solved it by making an array.lenght = 0 inside ionViewWillLeave ().
This works fine if I navigate between Page1 and Page2, since the array is emptied out of Page2 and sent back from Page1 if I re-enter.
The problem with this is that I actually have a third Page, which is below Page2.
The scheme would be this:
Page 1 -------------------> Page 2 -----------------> Page 3
With parameters ------ With array----------------
When I navigate from Page2 to Page3, ionViewWillLeave() is executed and the array is cleaned. Then when we go back (from Page3 to Page2), the array is empty because obviously Page3 does not return the contents of the vector as it does Page1. And so I have an empty Page2 template.
For this same thing I would need an event to run only after pop, to clean the array only when pop() is made from Page2, and it will not run whenever it is going to quit page hint.
Thank's so much in advance!
Ivan.
Related
I am using apex 21.1.
I have built a report with a form. The report page(2) has another region "Param" which has item P2_DEPTNO. The form(Modal Page -3) is for creating new records and editing existing records. There is a CLOSE DIALOG process in page 3 and it has P3_DEPTNO as a value for "Items to Return" attribute. Page 2 has a DIALOG CLOSED dynamic action with a true action of SET VALUE that sets P2_DEPTNO with the value of P3_DEPTNO. This is when I should call page 4 in a new tab(when P2_DEPTNO is assigned P3_DEPTNO's value.I am calling page 4 using the code...
apex.navigation.openInNewWindow('f?p=&APP_ID.:4:&APP_SESSION.:::4');
Unfortunately, it does not work and I do not know why. However, if the dynamic action is of type Alert, it works fine and displays the alert when P2_DEPTNO's value changes. What could be the reason for that?
ws=ESLAM_WS
un= forhelp
pwd=Forhelppwd$
app= Call new window
pages= 2,3 and 4
P.S: It works if I change P2_DEPTNO's value manually. But I need it to work when the SET VALUE dynamic action set it's value.
I tried to log in into you app, added another dynamic action event "Execute Javascript code" and entered your code without ':::4' part and it worked well for me.
so:
apex.navigation.openInNewWindow('f?p=&APP_ID.:4:&APP_SESSION.');
(also I have left an alert there that you mentioned worked anyway). If someone else fixed it meantime, I hope she/he will document here what she/he did.
I am using Ionic 2 and a list of clickable ion-item with details arrow:
<ion-item-group>
<button ion-item (click)="onWhenItemClick()">
Quand
<ion-note item-end>{{ date }}</ion-note>
</button>
<button ion-item (click)="onWhereItemClick()">
Où
<ion-note item-end>{{ location }}</ion-note>
</button>
</ion-item-group>
As there is this arrow I would expect (as a user) to see a new page sliding from right to left when clicking on of these items.
For your information, each ion-item should bring me to a page that only displays a list of radio items.
I would like to recreate the same mechanisms as a select or a modal but with a page.
So basically I want to push a new page (easy) and be able to pop/dismiss it and handle this dismissal with as function like onDismiss().
How would you do that?
Pushing the new page is not
There's no event for passing data back on dismiss of pages and haven't seen anything or any news about they implementing this functionality, you would really need to create modal instead of simply pushing a page.
So import modal on your page and add it to your constructor and do the following
onWhereItemClick(){
let modal = this.modalCtrl.create('YourPage');
modal.onDidDismiss(data => {
// HANDLE THE DATA YOU WANT TO PASS BACK
});
modal.present();
};
Then, in YourPage you'll import ViewController, add it to constructor and then
dismissModal(){
let myData = ''; // THIS IS THE CONTENT YOU WANT TO PASS BACK
this.viewCtrl.dismiss(myData);
};
With this you'll be able to send data back to your page and handle it.
Hope this helps.
EDIT
A workaround would be saving the data of your dismiss in localStorage or another way to persist it and then, when the user go back to the page you get it, something like this:
Your Page
ionViewWillEnter(){
this.storage.get('dataYouWant').then(data =>{
if(data){
// HANDLE DATA
}
});
}
ionViewWillLeave(){
this.storage.remove('dataYouWant');
// REMOVE THE DATA SO IF YOU COME BACK TO THIS PAGE FROM ANOTHER WAY IT DOESN'T LOAD DATA YOU DON'T WANT
};
Pushed Page
ionViewWillUnload(){
this.storage.set('dataYouWant', dataYouWant);
// SAVE DATA YOU WANT TO USE
}
The way when the second page is going to unload it'll save data on a localStorage to be used in your first page. If there's any concurrence problems you can try using ionViewDidEnter() on the first page instead of ionViewWillEnter()
To go to a new page you would need to use,
navCtrl.push(PageName)
To send data along with the push,
navCtrl.push(PageName,{Param1:"your data"})
To retrieve the pushed data from other page,
navParams.get("Param1")
In your case, you can pass some data while pushing your page like this,
onWhenItemClick(itemData){
this.navCtrl.push(PageName,{Param1:itemData)
}
and retrieve your data from the other page
I suggest you to have a look at this amazing tutorial https://www.joshmorony.com/passing-data-between-pages-in-ionic-2/
You're going to want to use Ionic's navController. It behaves very much like a stack, where you push new views onto the stack, and then pop them off to go 'back'
So to navigate to a new page you would
navCtrl.push(myComponent)
Then to go back you would remove that view from the stack with
navCtrl.pop()
You can also use navCtrl.popToRoot() to jump all the way back to your root view controller
Please see their docs for more examples and information at https://ionicframework.com/docs/api/navigation/NavController/
I have some flow on my app that, in some moment, I push a page to the stack and, on that page, I call a loading dialog for some data load. The problem is that the loading dialog didn't showed up. Then I realized that when I got back to the previous page, the loading was there, under my page that was being showed up. If in my navigation flow, instead of nav.push I use nav.setRoot, it works fine, so I think it's some glitch with that navigation stack. I really wanna use nav.pushcause it makes more sense for my app.
Any ideas?
EDIT:
my function that call the page:
onViewUnidade(unidade){
if (unidade.tipo == "Unidade Consumidora"){
this.nav.push(UnidadeConsumidoraPage, unidade);
}else if (unidade.tipo == "Usina"){
this.nav.push(UsinaPage, unidade);
}
}
my onInit method:
ngOnInit(){
console.log("show loading");
this.loading = this.loadingCtrl.create({
content: "some message"
});
this.loading.present();
}
My console.log executes, and I even didn't dismissed it, so I could see it correctly. The Loading and LoadingController are properly imported and injected.
EDIT 2:
I noticed that issue only happens when the page that redirects to my last page with the loading is a modal. If I change it for a regular page, it works correctly. Also, tried to dismiss the modal and popToRoot before navigate to new page... but still gotting same issue. Any ideas?
got my answer on documentation:
Instead of injecting navigation controller, when you wanted to navigate from an overlay component (popover, modal, alert, etc), we have to get a reference of the root NavController in our app, using the getRootNav() method:
this.appCtrl.getRootNav().push(SecondPage);
Hope this helps who got the same problem!
Have a look at LoadingOptions
export interface LoadingOptions {
spinner?: string;
content?: string;
cssClass?: string;
showBackdrop?: boolean;
dismissOnPageChange?: boolean;
delay?: number;
duration?: number;
}
You can set dismissOnPageChange(to true). Make sure you dismiss the loading dialog or set duration.
I want to have the android back button to close the app if the user is on one of the two main pages. Both pages can be navigated to with two tabs button, which are shown on those both pages. But on any other pages I want to keep normal stack pages behaviour.
I read about registerBackButtonAction and also got some information in this thread concerning Ionic 1.
I created a custom behaviour to close the app:
private registerSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(e){
this.platform.exitApp();
}.bind(this),101);
}
}
My idea is to call the registerSpecificActionOnBackButton() function in the ionViewWillEnter() function on the pages where this behaviour is needed.
But I don't manage to cancel that behaviour on the ionViewWillLeave() function with a deRegisterSpecificActionOnBackButton() function, I've tried among other things:
private deRegisterSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(e){return true},101);
}
}
Or
private deRegisterSpecificActionOnBackButton = () => {
if(this.platform.is('android')||this.platform.is('windows')){
this.platform.registerBackButtonAction(function(event){event.unbind()},101);
}
}
But I happen to be stuck. Has anyone any idea about canceling a custom registerBackButtonAction?
I've managed to make this work as I expect: When the app is on one of the pages that can be reached thru the tabs menu, it closes when the back button is hitten (on Android).
First, forget about the registerBackButtonAction() for the moment because as quoting what is explained in this thread of 2016-08-05:
it suggests not trying to override the default back button behavior.
So I've looked for other solutions. I've found one that is not really clean but works.
To begin with, I looked if I could reset the stack with the NavControler using remove(startIndex, removeCount, opts). But that doesn't work out because the two main pages are embeded in the tab page (like it is shown there).
So when you're on one of those pages the NavController is a Tab and the parent of that is a Tabs.
In Tabs there is a Array variable named _selectHistory. The _selectHistory array seems to have a role similar to the stack. So when navigating from one page to another using the two tab buttons, one can see in a console.info(this.[NavControler var of the page].parent._selectHistory) that the array grows as the tab buttons are hitten alternatively. And when trying on a real device, the back button take you back switching from one page to another until the array is empty and then the next back button hit closes the app.
Hence I thought: Let see what happens if I override the value of that array. It cannot be done thru a function to apply on a Tabs object (unlike what is possible with NavController).
So in the Page concerning my pages embedded in the Tab page, I added the following in ionViewWillEnter():
ionViewWillEnter(){
this.navCtrl.parent._selectHistory=[];
}
This.navCtrl is my NavController object passed in the constructor of the page.
That's it.
How can I call a function on click of back button in Ionic 2 from a specific page?
I have the following scenario in my mind. Lets say I navigate like below:
PageA --> PageB --> PageC --> PageD
Now when I click back button on PageD I want to go back to PageB instead of PageC. I want to call below function on click of back button.
goBack(){
this.navCtrl.popTo(PageB);
}
I have done it Like this:
ionViewDidEnter(){
this.bindMethodToElement('back-button',this.goBack);
}
bindMethodToElement(elementClassName,functionToBind){
try{
let elements = document.getElementsByClassName(elementClassName);
let currentElement : Element = elements[elements.length - 1];
currentElement.addEventListener("click",functionToBind);
}catch(exception){
console.log(exception.message);
throw exception;
}
}
Does anyone know better approach to do it. I also want to achieve similar behavior when user clicks on the device back button.
Such a feature was already reported to the Ionic team and they are validating it. In the meantime you can use this workaround:
goBack(){
this.navCtrl.pop().then(() => {this.navCtrl.pop()});
}
Ugly solution but works. Good luck!