离子2 Angular NavController，弹出回到第二页

Question

我有以下导航案例：

Home -> navCtrl.push(SearchPage) -> navCtrl.push(ResultPage)

或

Home -> navCtrl.push(SearchPage) -> navCtrl.push(ResultPage) -> navCtrl.push(DetailPage)

我想导航回搜索页面。在第一种情况下，没有问题，我可以使用

this.navCtrl.pop()

但是，在第二种情况下，我尝试使用

this.navCtrl.popTo(SearchPage)

这是无法预期的。离子仅在堆栈中浏览一页。我知道Popto（）（https://github.com/driftyco/ionic/issues/6513）

如何解决此问题？

Answer 1

尝试这个！进入DetailPage后，请执行：

this.navCtrl.remove(2,1); // This will remove the 'ResultPage' from stack.
this.navCtrl.pop();  // This will pop the 'DetailPage', and take you to 'SearchPage'

Answer 2

this.navController.push(SearchPage).then(() => {
  const index = this.viewCtrl.index;
  this.navController.remove(index, 1); //this will remove page3 and page2
});

将此代码包括在您的组件中。

Answer 3

好的，找到了一个解决方案。看起来它有效...至少目前

this.navCtrl
        .push(SearchPage)
        .then(() => {
            const index = this.viewCtrl.index;
            for(let i = index; i > 0; i--){
                this.navCtrl.remove(i);
            }
        });

Answer 4

 this.nav.push(AnotherPage)
 .then(() => {
    const index = this.viewCtrl.index;
    this.nav.remove(index);
 });

Answer 5

我在这里回答了一个类似的问题，它似乎也适用于您的问题。由于我懒惰加载模块，因此Popto（）仅在我从navController.getViews（）array传递对象时才起作用。话虽如此，您可以尝试这样的事情：

let targetView = this._navCtrl.getViews().filter(view=> view.id == 'MyAwesomePage')
targetView.length ? this._navCtrl.popTo(targetView[0]) : this._navCtrl.pop()

或更多类似的详细内容：

let index: number;
let views: any[] = this._navCtrl.getViews()
let found: boolean = views.some((view, i) =>{
  index = i
  return (view.id == 'MyAwesomePage')
})
found ? this._navCtrl.popTo(views[index]) : this._navCtrl.pop()

如果要更改订单，则可以getViews（）。rectress（）。filter（）或views.reversess.s.reverse（）。某些（）。这是用Ionic 3和ES5的阵列。Some（）

Answer 6

您可以通过使用insertpage方法修改导航控制器堆栈来做到这一点。

 this.nav.insertPages(0, [{page: your_home_page}, {page: SearchPage}]);
 this.nav.pop();

在这里0指的是要插入页面的位置。在上面的代码中，0将是您的主页，1将是您的搜索页面。将此命令在您的详细信息页面中使用到搜索页面。

有关更多信息，请访问http://ionicframework.com/docs/v2/api/navigation/navcontroller/

Answer 7

我也遇到了相同的问题并找到了解决方案，它类似于接受的答案，但没有循环和更多细节，所以我希望这可以帮助某人理解它。

所以这是流程：

Home -> navCtrl.push(SearchPage) -> navCtrl.push(ResultPage) -> navCtrl.push(DetailPage)

这是各自的索引：

Home: 0
SearchPage: 1
ResultPage: 2 
DetailPage: 3

如果您想从详细信息页面返回搜索页面，则基本上想在推开详细信息页面时从堆栈中删除结果页面。

因此，当您按下详细信息页面时，请在结果页面上尝试此代码：

// First get the index of ResultPage, it should return 2.
let resultIndex = this.navCtrl.last().index; 
// Push DetailPage.
this.navCtrl.push(DetailPage).then(() => {
  // Once it's pushed, this block is called and now we can remove the ResultPage from the stack.
  this.navCtrl.remove(resultIndex, 1); 
  // second parameter is optional and defaults to 1, if you want to remove more pages from stack start with the bottom most index you want to remove and pass number of pages you want to remove starting from the given index. 
});

希望这对某人有帮助。

Answer 8

在我的情况下，它很喜欢这个

import { NavController, NavParams } from 'ionic-angular';
export class MyComponent {
    ...
    constructor(private navParams:NavParams, private navCtrl:NavController){
        //If I get the paramater, I know I have to "skip" last view
        let condition = this.navParams.get("condition");
        if (condition){
            this.navCtrl.removeView(this.navCtrl.last());
        }
    }
    ...
}

所以，无论您是使用软/硬按钮还是手动pop（），先前的视图将被跳过。

Answer 9

最好的方法（因为避免页面之间的过渡并直接转到第二页）是以下解决方案：

this.navCtrl.remove(nav.getActive().index - 1, 2)

希望对您有用