ionic2模板:每个列表项(主页)都连接到选项卡结构页

Question

我遇到了一个棘手的情况：

在我的ionic2应用程序中，我有一个待办事项列表主页，其中列出了等待批准的工作流。我的每个工作流项目都可以调用一个函数来导航到选项卡根页面，以查看工作流详细信息，如下所示：

// HomePage:
selectItem(workflow){
this.nav.push(TabsPage, workflow);
}
// my HomePage view 
<ion-header>
<ion-navbar>
<ion-title>
My to-do list
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="logOut()">
<ion-icon name="log-out"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item text-wrap *ngFor="let w of wfList | async" (click)="selectItem(w)">
<h3>{{w.case.name}} </h3>
<ion-icon name="ios-arrow-dropright-outline" item-right></ion-icon>
</ion-item>
</ion-list>
</ion-content>

我的选项卡根目录包含3个不同的页面。(每个工作流信息分为3个选项卡)。

//TabsPage:
tab1Root: any = PageA;
tab2Root: any = PageB;
tab3Root: any = PageC;
//Tabs Html
<ion-header>
<ion-navbar>
<ion-title>
TabsRoot
</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="PageA" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="PageB" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="PageC" tabIcon="contacts"></ion-tab>
</ion-tabs>

在我的页面A中，我有一个"批准"按钮。如果用户批准了工作流，我会显示一条祝酒词消息，然后我想弹回我的待办事项列表。(我的主页)。

// PageA:
approve(id){
this.wf.changeStatus(id).then(() => {
this.navCtrl.pop();  <- error
});
}

一切都很好，除了当我试图弹回来时，我收到了一条错误消息：

EXCEPTION: Uncaught (in promise): false

我尝试使用popTo(HomePage)和popAll()，但得到了相同的结果。使用过的popRoot()将返回到选项卡根页面，其中没有任何内容。如果我使用setRoot(HomePage)将返回主页，但导航栏上仍有"后退箭头"。

有人能帮忙吗？非常感谢！

您的系统信息：

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.0
ios-deploy version: 1.9.1 
ios-sim version: 5.0.10 
OS: OS X El Capitan
Node Version: v6.9.5
Xcode version: Xcode 8.2.1 Build version 8C1002

以下是我的元素布局：

主页->TabRoot(包括PageA、PageB和PageC)。主页是选项卡的父页。

Answer 1

如果从选项卡(选项卡的项)进行导航，则应转到选项卡的根目录。下面是一个例子。

let nav = this.app.getRootNav();
nav.setRoot(AnotherPage);

你可以在我的教程中找到选项卡的问题。

Answer 2

我想我找到了自己的答案。感谢Djamware的提示。

在我的主页上，我调用了nav.push(TabsRoot)；这让TabRoot在我的主页上名列前茅。

在我的TabsRoot中，我有3个子页面，它们都有相同的RootPage，这就是TabsRoot页面。

<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="PageA" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="PageB" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="PageC" tabIcon="contacts"></ion-tab>
</ion-tabs>

因此，从tabsroot页面的子页面PageA(或B或C)，需要首先返回到rootPage。然后从rootPage，我执行tabsRoot.pop()，它将返回主页

// PageA.ts
import { App, NavController, NavParams } from 'ionic-angular';
constructor(public app: App) {
.....
}
approve(id){
this.wf.changeStatus(id).then(() => {
let tabsRoot = this.app.getRootNav();
tabsRoot.pop(); 
});
}

再次感谢在座的每一位努力提供帮助的人：-)

Answer 3

好吧，在分析代码后，问题似乎是你把选项卡放在了一个子页面(TabsRoot)中，它的父页面是主页。但是，选项卡需要进入根页面(即主页)。

因此，尝试将选项卡的HTML标记和代码移动到主页(根)，它应该可以工作。