Question

我有以下导航案例：

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

或

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

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

this.navCtrl.pop()

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

this.navCtrl.popTo(SearchPage)

并且这不能按预期工作。 Ionic仅在堆栈中导航一页。我知道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

VirtualPathProvider

在您的组件中包含此代码。

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

我在这里回答了类似的问题，它似乎也适用于你。因为我懒得加载模块，所以当我从NavController.getViews（）数组传递一个对象时，popTo（）似乎只能工作。话虽如此，你可以尝试这样的事情：

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（）。reverse（）。filter（）或views.reverse（）。some（）。这是使用Ionic 3和ES5的Array.some（）

Answer 6

您可以通过使用insertPage方法修改导航控制器堆栈来完成此操作。

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

此处0表示您要插入页面的位置。在上面的代码中，0将是您的主页，1将是您的搜索页面。在您的DetailPage中使用此命令导航到SearchPage。

有关详细信息，请查看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

如果你想从DetailPage返回到SearchPage，你基本上想要在推送DetailPage时从堆栈中删除ResultPage。

因此，当您按DetailPage时，请在ResultPage上尝试此代码：

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

因此，无论您是使用软/硬按钮还是手动弹出（），都将跳过上一个视图。

Answer 9

最好的方法（因为避免在页面之间进行转换并直接转到倒数第二页）是以下解决方案：

<head>
<title>HTML TABLE</title>
<link rel="stylesheet" type="text/css" href=".\table.css" />
</head><body>
<p style="text-align:center;"><H2>Header</H2>
<table>
<tr><th>Count</th><th>Name</th></tr>
<tr><td>1</td><td>Gary</td></tr>
<tr><td>2</td><td>Sarah</td></tr>
<tr><td>3</td><td>Bob</td></tr>
<tr><td>4</td><td>Ian</td></tr>
<tr><td>5</td><td>Susan</td></tr>
<tr><td>6</td><td>Robin</td></tr>
<tr><td>7</td><td>Paul</td></tr>
<tr><td>8</td><td>Jane</td></tr>
</table>
</body></html>

希望对您有用

Ionic 2 Angular NavController，弹回第二页

9 个答案: