How to know that the page is returned

Ionic Framework ionic-v3
#1

Page1：blog list page
Page2：blog add page

Exp:

Page1 => click button => Page2 => do nothing => return Page1.
Page1 => click button => Page2 => submit a blog => return Page1.
Ask:
Could Page1 reload data only when ’ submit a blog’ ?

Whether you add an IonViewDidPop interface to receive the returned data ？

#2

Sure you can. But I think it would be a good idea to load page2 inside a modal. That way you can ‘listen’ for the onDismiss event and see whether something was changed or not. You can then act on the data that’s coming back from the modal and thus ‘reload’ (although I would like to note that reloading seems redundant in a SPA build with Angular).

I would do something like this:

Inside page1, create the modal and start listening to the onDismiss();

Load up page2 inside the modal, then do whatever stuff you want. If the modal get’s closed with the normal close button, it shouldn’t return any data.

If the modal was dismissed by pressing the ‘submit a blog’ button, you should pass data back into page1. Now you now that someone actually pressed submit a blog! Also it’s now easy to also ‘reload’ your local list of blogs, by simply adding the newly received blog to your (local) list. At the same time you can push it to server off course, although I would probably already post it back to your endpoint from within the modal.

#3

Basicly if you created the blog on Page2, simply return the new blog data to Page1 when you perform a navCtrl.pop().

In Page1 check if the pop returned any value, if it did just append the data to your list.

#4

thanks, but, Exp:
in page 1 => add a blog => review the blog => back to page 1 (must refresh data)

modal can’t do it.

#5

Okay, so I understand that the blog needs to be reviewed and that it shouldn’t display immediately. Could you explain why you want to refresh page 1 anyways when returning from page2 to page1? How do you know a refresh is necessary at that point? It seems to me you’re creating extra unnecessary traffic to your server, but okay.

I don’t see why a modal can’t do such stuff? Care to explain? You could just pass back a value shouldRefresh to your page1 if the modal is dismissed.

If you don’t like the idea of a modal, you could set a boolean inside a service that’s shared between both pages. On loading page1 check whether the boolean resolves to true or not.

navCtrl.pop() isn’t capable of sending data through the params as far as I can tell.

#6

yes, but nav.pop can’t return a data

#7

maybe, let pop return a data will be well.

#8

Sure it can, theres a discussion here about it here.

    public goToPage2(device){
        new Promise((resolve, reject) => {
            this.nav.push(EditDevicePage, {resolve: resolve});
            }).then( data => {
                if(data)
                    this.blogList.push(data);
        });
    }

and in the Page2

saveBlogPost(){
    let newBlogPost = createNewBlogPost();
    this.navCtrl.pop().then(
        () => this.params.get('resolve')(newBlogPost)
    );
}
#9

Okay, but it isn’t a documented feature of the pop method. It might be a good feature request.

#10

I’m pretty sure it’s been requested a lot, going back to before I got involved with Ionic. I don’t think it’s ever been officially supported. Using a modal is better, because the ViewController passing parameters after the modal is dismissed is a supported feature. Clever “hacks” make more sense with a framework that’s been stable for years, not one that might introduce a breaking change to a hack tomorrow.

#11

Ye there have been pop with params requests github. But as @AaronSterling suggests it seems that using a modal is a better approach.

#12

I agree with @AaronSterling on this . That’s why I proposed the modal solution :wink: A service could be a second option, but isn’t bound to timing of the dismissal. I still don’t know why a modal is no option @anrip?

#13

page 1 -> some other page -> add blog page -> review blog page -> back to page 1.

how to use the model ?

#14

Who’s doing the reviewing? This extra page wasn’t in your original post btw. Little bit confusing. You could always create a modal for the blog page as for the review blog page. Then you can listen to both events. So:

Possible steps:

  • I want to add a blog! (user pushes add blog button, modal pops up);
  • User closes modal, we listen in page 1 to the dismissal and do nothing
  • User submits blog, now we could pop up the second modal and listen to it again.

Or you could just handle both views as components inside your modalPage, that’s another option. By that I mean creating a add blogpost component and a review component which both are presented within the same modal.

#15

thanks, i will try it later

#16

I’m wondering, how are you navigating from page2 to the reviewpage and then back to the first page?

#17

all new page use the ‘nav.push’ to open

#18

You need to use Event plaggin

blogadd(){
// do something then ...
this. PopMe();
}
 PopMe(){
     this.events.publish('loadPage1');
   this.navCtrl.pop();
    }

this.events.subscribe('loadPage1',() => {
        //  reload blog list page
        });
#19

I will use service (provider) to store the tmp variable.

#20

The best and simple option is use
ionViewWillEnter(){
console.log(“Returned to page”);
this.getList();
}
With this we know when returned from another page