离子3导航控制器弹出两次与模态得到不一致的历史

Question

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

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

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

但是，我有同样的错误（Ionic 2 Angular NavController, pop back to second last page）

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

Project code

家

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

当我单击模态按钮时，我想要调试console.log（）行显示：

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

我不明白为什么我只使用ModalCmp和ItemListPage而不是HomePage和ItemPage。

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

Answer 1

最后我找到了解决方案。

实际上，模态组件有自己的历史，因此不可能修改模态组件的主要历史。我们应该忽略在先前视图中返回的模态并访问主历史以执行navCtrl.pop（）。

Conclusion

最后，Ionic Modals无法访问主要视图历史记录。

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

}