ionic-framework: V2 - Multiple pages pushed on modal, dismissing viewController errors out

Just to make it clear for everyone else having the same problem, the final code that works for me is as follows (combined all the answers above)

let firstViewCtrl = this.navCtrl.first();
this.navCtrl.popToRoot({animate: false}).then(() => firstViewCtrl.dismiss());

A better way to achieve multi-page modals, could be to wrap the pages inside an ion-nav. Which allows you to dismiss it from any page in the stack. So the modal parent would look like:

@Component({
  selector: 'multipage-modal-parent',
  template: `
    <ion-nav [root]="root"></ion-nav>
  `
})
export class MultipageModalComponent{
  constructor(viewCtrl: ViewController) {}
  root = FirstPageComponent;
}

Then from any component inside the ion-nav:

this.navCtrl.parent.getActive().dismiss();

Where getActive() gives you the viewController to call dismiss() on.

在Ionci2中实现NavController与ModalController弹出多个窗体传值并返回问题 let firstViewCtrl = this.navCtrl.first(); this.navCtrl.remove(firstViewCtrl.index, this.navCtrl.length()).then(()=>{ let data = { ‘foo’: ‘Test1:从test3返回了’ }; firstViewCtrl.dismiss(data); });

this was not animating like a modal pop should, so this is what I’ve come up with:

this.navCtrl.popToRoot({animate: false}).then(() => firstNavCtrl.dismiss())

@six006 Thank man!! 赞 I have tested the code suggested by @six006 . Work like a charm!!

let firstViewCtrl = this.navCtrl.first();
this.navCtrl.remove(firstViewCtrl.index, this.navCtrl.length()).then(() => {
    firstViewCtrl.dismiss();
});

the navCtrl.remove() is necessary, otherwise the pageThree will remain on screen after the modal dismissed.

I am totally fine with that. Is the suggestion to use the NavController and pop the top view when navigating away from a page, then? That should be okay, but how do we get data back to the child unless we pass the parent to the child via NavParams, or use a shared singleton?

For those landing here following the demo in the Modal docs, the following code works:

constructor(private navCtrl: NavController){}
this.navCtrl.rootParams.viewCtrl.dismiss();

rootParams will show up as an error since it’s not defined on navController but it compiles.

It might relate. I found problem in the following scenario in which leads me to learn a hard lesson. I show a modal on current page. Then push a new page on top of modal. Now I want to navigate back to the root page (the page that showed a modal). What I found is that, I just can’t use this.navCtrl of modal with an intention to go back to the first page. It’s because of NavController of modal and page are not the same object, it manages its own stack.

Thus if I need to manage navigation on behalf of modal, I need to send in NavController of the page to modal then manage thing further on that.

Hi, danbucholtz

I have the same problem with u, I want to dismiss the modal after a push(PageThree), but failed and back to PageTwo

Have u fixed this problem?