javascript - Ionic 3 导航 Controller 弹出两次，模式的历史记录不一致

Question

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

• 首页
• 项目列表
• 项目
• 项目模态

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

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

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

项目代码

首页

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

}

代码结果

当我单击模式按钮时，我期望 debug 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

终于找到解决办法了。

确实，模态组件有自己的历史记录，因此不可能修改模态组件的主要历史记录。我们应该关闭模式以返回先前 View 并访问主历史记录以执行navCtrl.pop()。

结论

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

文件已更改

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

}