ViewController and popTo ionic

I want to use popTo ( http://ionicframework.com/docs/v2/api/components/nav/NavController/#popTo ) in my ionic 2 application. Which requires a ViewController ( http://ionicframework.com/docs/v2/2.0.0-beta.7/api/components/nav/ViewController/ )

I am not able to figure out how to create a page as a ViewController that is usable in popTo with the documents present over the internet.

Has someone used popTo ? any heads up !!

Can you share what you’ve tried?

popTo should be usable inside any @Page as long as there is history to go back to.

I have three pages Home, Page2 and Page3.
I push from home to Page 2
Push from Page 2 to Page 3
PopTo from Page 3 to Home
(on button click event)

Home.ts

import {Page, NavController, ViewController, Modal} from 'ionic-angular';
import {Page2} from './page2';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  static get parameters() {
    return [[NavController], [ViewController]];
  }

  constructor(public nav,public viewCtrl) {
    this.viewCtrl = viewCtrl;
    this.nav = nav;
  }
  gotopage2() {
    this.nav.push(Page2);
  }
}

Page2.ts

import {Page, NavController} from 'ionic-angular';
import {Page3} from './page3';

@Page({
  templateUrl: 'build/pages/home/page2.html'
})
export class Page2 {
   constructor(private nav: NavController) {
  }

  gotopage3() {
    this.nav.push(Page3);
  }
}

Page3.ts

import {Page, NavController, ViewController} from 'ionic-angular';
import {HomePage} from './home';

@Page({
  templateUrl: 'build/pages/home/page3.html'
})
export class Page3 {
  constructor(private nav: NavController) {
  }
  
  gotohome() {
     this.nav.popTo(HomePage);
     //Error: [ts] Argument of type 'typeof HomePage' is not assignable to parameter of type 'ViewController'.
     //Property 'componentType' is missing in type 'typeof HomePage'.
  }
}

There is history to go back to I can see in the browser’s developer console.
Am I missing on something?

Ahh, looks like i missed an issue.

Looks like this is a known issue.
Let’s move the discussion over there.

Seems to work fine for me.
I created the viewCtrl reference whilst on page 1 (e.g. popBack:this.viewCtrl), kept the reference by passing through as a navParam across all navigation and then simply called nav.popTo(this.navParams.popBack) and works.

Hope this helps, if you still have problems let me know

Hi @chrismclarke could you please provide the full code? Needless to say that Ionic 2 Examples are a rare breed out there.

On second thoughts you only need to use navParams if you want to track page history (i.e. have a new back button appear on the home page to take you back to page 3). I imagine this isn’t what is wanted and instead just use the following code:

Page3.ts

 gotohome() {
     this.nav.setRoot(HomePage)
  }

hey please share code for popTo().

1 Like

The documentation for this method has been pulled from the ionic website (see here). @mharingon, WTF?

Here’s the solution - https://stackoverflow.com/questions/34947496/how-to-use-nav-popto-ionic-2

// Move back two places.
this.navCtrl.popTo(this.navCtrl.getByIndex(this.navCtrl.length()-3));

FIX THE SIGNATURE IF IT DOESN’T TAKE STRINGS!!! Really losing faith in basic ionic functionality at this point…

2 Likes