NavController.push() will

Short description of the problem:

When calling NavController.push() method, it looks like it will push the previous page first when you’re on a page that has been pushed on the stack. So f.e. if you’re on Page 1 and push to Page 2, this will push Page 1 on the stack (it seems like this), with the data neccesary to go to Page 2. When you then select a different item, it will show the data stored from the previous push.

What behavior are you expecting?

Expecting to push to my page without having to click twice.

Steps to reproduce:

1. run - ionic start myApp sidemenu --v2 --ts
2. create 1 more page, Page3
3. In app/page2/page2.ts change itemTapped() to :

itemTapped(event, item) {
    // That's right, we're pushing to ourselves!
    this.navCtrl.push(Page3, {
      item: item
    });
  }

and import Page3. 4. In page3.ts import NavParams and change constructor to:

 item:any;
    constructor(public navCtrl:NavController, navParams:NavParams) {
        this.item = navParams.get("item");
     }

1. In page3.html, print the item.
2. run ionic serve
3. Go to Page2 (menu item), select item 4.
4. You won’t go to the next page, just see the ripple effect.
5. Click on item 2.
6. You will be taken to Page3, showing that you came from item 4.

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc) http://stackoverflow.com/questions/39325829/ionic2-angularjs2-navcontroller-pushes-previous-page

(includes pictures of Network tab, showing what is loaded when)

Which Ionic Version? 1.x or 2.x Ionic version 2.0.0-beta.37

Plunker that shows an example of your issue

Couldn’t get Plunker working with Ionic2.

Run ionic info from terminal/cmd prompt: (paste output below)

Your system information:

You have been opted out of telemetry. To change this, run: cordova telemetry on. 6.3.0

Gulp version: CLI version 3.9.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.11 Ionic CLI Version: 2.0.0-beta.37 Ionic App Lib Version: 2.0.0-beta.20 OS: Node Version: v6.3.0

---

Dependency warning - for the CLI to run correctly, it is highly recommended to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 npm install -g cordova

---

[64jcl]

Whoa! So you cant use the selector? Isn’t that the name also used in the scss for styling a particular pages elements? Does it mean we have to class the content in order to get something similar working for css scope?

Please do remember then that the command “ionic g page MyNewPage” does generate a page with a selector in the @Component tag! That also generates an scss with the selector.

[ivarreukers]

This issue has been solved.

Turned out 'selector' is bugged

You can’t push to a page which has the 'selector' in the @Component . Remove the selector and you can push. 👍