Javascript 离子3导航控制器pop两次与modal获得不一致的历史记录

我有一个离子3多页的项目。 有一个导航步骤：

• 家
• 项目清单
• 项目
• 项目模式

在模式中，有一个确认按钮。我希望此按钮返回到ItemList。返回项目列表后，返回按钮应将用户返回主页

但是，我有和这个一样的错误（）

我尝试了高票答案提出的解决方案，但失败了

项目代码 家 home.html 线性对象表 itemlist.html 项目 item.html 项目模态 itemmodal.html 但我明白了：

Stack history Before: 0
function ModalCmp()

Stack history Before: 1
function ItemlistPage()

Stack history After : 0
function ModalCmp()

Stack history After : 1
function ItemlistPage()

我不明白为什么我只有ModalCmp和ItemListPage的历史记录，而没有HomePage和ItemPage

---

你知道一种干净地返回ItemList的方法吗？

我终于找到了解决方案

事实上，模态组件有自己的历史记录，因此不可能修改模态组件的主要历史记录。我们应该取消模式以返回到Prevention视图中，并访问主历史以执行navCtrl.pop（）

结论 最后，离子模态无法访问主视图历史

文件更改 itemmodals.ts 项目1.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);
  }

}

<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>

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);
  }

}

<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>

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();
  }

}

<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>

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);
      }
      });
  }

}

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()

Stack history Before: 0
function ModalCmp()

Stack history Before: 1
function ItemlistPage()

Stack history After : 0
function ModalCmp()

Stack history After : 1
function ItemlistPage()

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'});
  }

}

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();
  }

}