[b11] Modal fails to dismiss when nav.pop or nav.popToRoot fires (with plunkr)

Ionic Framework ionic-v3
1

I have a timer set to destroy log the user off, and push the login page.
Previously, I pop’d to root, and pushed the page, however in b11, if a Modal is displayed, the pop works, but the Modal is not dismissed.

This seems contrary to the documentation.

When a modal (or any other overlay such as an alert or actionsheet) is “presented” to a nav controller, the overlay is added to the app’s root nav. After the modal has been presented, from within the component instance The modal can later be closed or “dismissed” by using the ViewController’s dismiss method. Additionally, you can dismiss any overlay by using pop on the root nav controller.

replicated in a plunker. after 1 second of hitting the button, I expect the pop call would close the modal.

2

Will update the docs for that, as it does seem misleading.

Note, that this does work

  pushModal() {
    let modal = this.modalCtrl.create(Page1Page);
    modal.present().then(() => {
      setTimeout(() => {
        console.log('should pop');
        modal.dismiss();
      }, 1000);
    });
  }
3

Short of moving all of my Modals back to Pages, is there any way to graft the Modal into the Nav / View Hierarchy?

Page 1 -> Page 2 -> Page 3 -> Modal

When logout, replace Page 1 with Page Z

4

No, not really.

That is how they used to be, but it caused many problems, so we’ve refactored them.

5

I have similar problem.

My nav stack: Page1 > Page2 > ModalPage > Page3

I need to pop to root Page1 then push Page3.

This code from app.component.ts:

@ViewChild('appNav') nav: NavController;
...
this.nav.popToRoot().then(() => {
     this.nav.push('Page3')
});

Doing next:
Page1 > Page2 > ModalPage > Page3
to
Page1 > ModalPage > Page 3
then
Page1 > Page3 > ModalPage > Page 3.

How I can solve this problem and pop to rootPage with closing modalPage and Page3?

6

Solved this problem by next solution:

in app.component:

this.events.publish('some:event');
            this.nav.popToRoot().then(() => {
              this.nav.push('Page3');
            });

in ModalPage:

this.events.subscribe('some:event', () => {
      this.navCtrl.popToRoot().then(() => {
        this.viewCtrl.dismiss();
      });
    });
1 Like
7

it worked perfectly. thanks