Ionic 3 navcontroller pop twice with modal got not consistent history

2
votes

I have a Ionic 3 project with multiples pages. There is the step of navigation :

  • Home
  • Item List
  • Item
  • Modal of item

In the modal, there is a button of confirmation. I want this button return to ItemList. After returned on Item List, the back button should return user to Home.

But, I have the same error of this one (Ionic 2 Angular NavController, pop back to second last page)

I tried the solution proposed by high vote answer but it fails.

Project code

Home

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button type="submit" (click)="goToList()">Go to list</button>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ItemlistPage } from '../itemlist/itemlist';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  goToList() {
    this.navCtrl.push(ItemlistPage);
  }

}

ItemList

itemlist.html

<ion-header>
  <ion-navbar>
    <ion-title>itemlist</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <button ion-item (click)="goToItem()">Item 1</button>
    <button ion-item (click)="goToItem()">Item 2</button>  
  </ion-list>
</ion-content>

itemlist.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ItemPage } from '../item/item';

@IonicPage()
@Component({
  selector: 'page-itemlist',
  templateUrl: 'itemlist.html',
})
export class ItemlistPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  goToItem() {
    this.navCtrl.push(ItemPage);
  }

}

Item

item.html

<ion-header>
  <ion-navbar>
    <ion-title>item</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <button ion-button type="submit" (click)="openModal()">Open modal</button>
</ion-content>

item.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { ItemmodalPage } from '../itemmodal/itemmodal';

@IonicPage()
@Component({
  selector: 'page-item',
  templateUrl: 'item.html',
})
export class ItemPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public modalController: ModalController) {
  }

  openModal() {
    let myModal = this.modalController.create(ItemmodalPage);
    myModal.present();
  }

}

ItemModal

itemmodal.html

<ion-header>
  <ion-navbar>
    <ion-title>itemmodal</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <button ion-item (click)="returnToList()">Return to list</button>
</ion-content>

itemmodal.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ItemlistPage } from '../itemlist/itemlist';

@IonicPage()
@Component({
  selector: 'page-itemmodal',
  templateUrl: 'itemmodal.html',
})
export class ItemmodalPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  returnToList() {
    this.navCtrl.push(ItemlistPage).then(() => {
      for (var i = 0; i < this.navCtrl.length(); i++) {
        console.log('Stack history Before: '+i);
        console.log(this.navCtrl.getByIndex(i).component);
      }

      this.navCtrl.remove(1, 3);
      this.navCtrl.pop();

      // Debug lines
      for (var i = 0; i < this.navCtrl.length(); i++) {
        console.log('Stack history After : '+i);
        console.log(this.navCtrl.getByIndex(i).component);
      }
      });
  }

}

Result of code

When I click in the modal button, I excepected debug console.log() line displays : 

Stack history Before: 0
function ItemListPage()

Stack history Before: 1
function ModalCmp()

Stack history Before: 2
function ItemPage()

Stack history Before: 3
function ItemListPage()

Stack history Before: 4
function HomePage()


Stack history Before: 0
function ItemListPage()

Stack history Before: 1
function HomePage()

But I got this : 

Stack history Before: 0
function ModalCmp()

Stack history Before: 1
function ItemlistPage()

Stack history After : 0
function ModalCmp()

Stack history After : 1
function ItemlistPage()

I don't understand why I got only history with ModalCmp and ItemListPage and not HomePage and ItemPage.

Do you know a way to cleanly return to ItemList ?

1
javascriptangularionic-frameworkionic3

1 Answers

0
votes

Finally I found the solution.

Indeed, modal Component has his own history, so it's impossible to modify the main history of the modal component. We should dismiss the modal to return in the precedent view and access to main history to do a navCtrl.pop().

Conclusion

Finally, Ionic Modals can't access to main views histories.

Files changed

itemmodals.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, ViewController } from 'ionic-angular';
import { ItemlistPage } from '../itemlist/itemlist';

@IonicPage()
@Component({
  selector: 'page-itemmodal',
  templateUrl: 'itemmodal.html',
})
export class ItemmodalPage {

  constructor(public navCtrl: NavController, public viewCtrl: ViewController) {
  }

  returnToList() {
    this.viewCtrl.dismiss({'action' :'remove'});
  }

}

item.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { ItemmodalPage } from '../itemmodal/itemmodal';

@IonicPage()
@Component({
  selector: 'page-item',
  templateUrl: 'item.html',
})
export class ItemPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public modalController: ModalController) {
  }

  openModal() {
    let myModal = this.modalController.create(ItemmodalPage);
    myModal.onDidDismiss(data => {
      if (data.action == 'remove') {
        this.navCtrl.pop();
      }
   });
    myModal.present();
  }

}