NavController - How to replace current page?

Ionic Framework ionic-v3
1

I have next flow:

Contacts page -> nav.push(NewContact) -> nav.push(ContactCreated)

How do I make that on the ContactsCreated page the “Back” button return user to root “Contacts” page instead of the NewContact page? So I would like to repalce a page in the navigation stack.

Ionic2.

1 Like
2

I tried nav.remove(1) but that brings me to 1st page immediately. I feel this replacement should be done in place of nav.push(ContactCreated).

@Injectable()
@Page({
    templateUrl: 'app/contacts/contact-created.html',
    directives: [User1stForm]
})
export class ContactCreated {
    contact: Contact;

    constructor(
        private params: NavParams,
        private nav: NavController,
        private http: Http
        //private contactsProvider: ContactsProvider
    ) {
        this.contact = params.get('contact');
        this.nav.remove(1);
    }
3

this.nav.poproot();

4

I don’t think there is a poproot() method?

5

I don;t need to popRoot. What I need is to replace Page 1 with Page 2 and keep root in stack.

Root Page

  • Page1
  • Page 2
6

Mind elaborating why? I can think of scenarios where users may not prefer that, maybe your solution is the best in the given case though.

Have you tried pop() and then push(Page2) immediately?

7

I pretty much described scenario but I;ll try to explain in more details.

On root page I have list of contacts and a “New contact” button. When user clicks it he come to the “New contact” page where she has a “Back” button. By clicking “back” she is canceling contact creation. If she created contact I want to bring here to a “Contact created” page where I want to offer some actions (like inviting the contact to app by email for example) but user can skip this step. To me it seems natural to have a “Back” button but it should not go the previous page with a form to crearte a new contact - she/I expects to get to contacts list.

Does it sounds sane?

8

Sorry - didn’t read your first post. Thanks for detailing.

Seems logical. It appears you could solve this with a modal. iOS 9 phone/contacts app brings up a modal, after which the user is navigated to the new contact.

9

I haven’t had a reason to try but look at this post and how they add an ng-click to the back button

You could check the current state and if on the state for the new contact use $ionicHistory.goBack(-2) otherwise use $ionicHistory.goBack() to go back to the previous page for all other states.

Make sense?

10

Modal is kinda OK, but I want to slide back from the ContactCreated page to ContactsList without showing the intermediate form.

I’m thinking to try again nav.popToRoot() - it had bug when I tried a week ago & did not work.

11

I was trying nav,popToRoot() earlier trying to fix my problem here

I didn’t get it to work.

Did you?

12

No,

Am getting error:

TypeError: Cannot read property 'instance' of null
    at http://localhost:8100/build/js/app.bundle.js:66056:70
    at Tab._stage (http://localhost:8100/build/js/app.bundle.js:66112:25)
    at Tab._transition (http://localhost:8100/build/js/app.bundle.js:66051:19)
    at Tab.popTo (http://localhost:8100/build/js/app.bundle.js:65884:19)
    at Tab.popToRoot (http://localhost:8100/build/js/app.bundle.js:65897:26)
    at TransferCreated.skip (http://localhost:8100/build/js/app.bundle.js:75556:19)
    at AbstractChangeDetector.ChangeDetector_TransferCreated_0.handleEventInternal (eval at <anonymous> (http://localhost:8100/build/js/app.bundle.js:33039:17), <anonymous>:451:30)
    at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:32353:25)
    at AppView.dispatchEvent (http://localhost:8100/build/js/app.bundle.js:36011:46)
    at AppView.dispatchRenderEvent (http://localhost:8100/build/js/app.bundle.js:36005:22)BrowserDomAdapter.logError @ app.bundle.js:48523
app.bundle.js:48523 ERROR CONTEXT:

I’ve created an issue: https://github.com/driftyco/ionic2/issues/582

13

@richardshergold it is supposed to be fixed in master: https://github.com/driftyco/ionic2/commit/dd82219d1a4bffaeee74fa3feb2c7d71a470859d

14

Hi just came across this, you need to rebuiild the nav path so in the constructor of contacts created reset the root and push the ContactsCreated page.
this.nav.setRoot(ContactsPage);
//you might want to pop some pages → this.nav.pop();
this.nav.push(ContactsPage);
this.nav.push(ContactsCreated);

the back from ContactsCreated will then bring you to contacts

1 Like
15

this.nav.pop();
worked for me.

1 Like
16

I had the same issue and wrote a short post about the solution that worked for me https://alexdisler.com/2016/04/15/remove-page-modal-from-navigation-stack-ionic-2/

    this.nav
      .push(DetailsPage)
      .then(() => {
        const index = this.viewCtrl.index;
        this.nav.remove(index);
      });
10 Likes
17

thanks this is what i did for my use case

    let alert = Alert.create({
        title: 'SENT!',
        subTitle: message,
        buttons: [
        {
            text: 'OK',
            handler: () => {
                this.nav.push(WorkPage).then(() => {
                    const index = this.nav.getActive().index;
                    this.nav.remove(index-1);
                    this.nav.remove(index-2);
                });}
        }
    ]
    });
2 Likes
18

I have asked one qn there … can u give answer of that bez i am facing an issue ,

19

Woo… you save my time … working grate !!