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>

在我的pageA中，我有一个＆＃34; Approval＆＃34;按钮。如果用户批准了工作流程，我会显示一个Toast消息，然后我想回到我的待办事项列表。（我的主页）。

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

一切正常，除非我试图回弹，否则会收到错误消息：

 EXCEPTION: Uncaught (in promise): false

我尝试使用popTo(HomePage)和popAll()，但我得到了相同的结果。 used popRoot()将返回到选项卡根页面，其中没有内容。如果我使用setRoot(HomePage)将返回主页，但导航栏仍然有＆＃34;后退箭头＆＃34;那里。

有人可以帮忙吗？非常感谢你！

您的系统信息：

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

以下是我的元素布局：

首页 - ＆gt; TabRoot（包括PageA，PageB和PageC）。 HomePage是Tabs的父页面。

Answer 1

如果从Tab（标签项）导航，则应转到标签的根目录。这是一个例子。

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

您可以在my tutorial中找到标签问题。

Answer 2

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

在我的主页中，我调用了nav.push（TabsRoot）;它将TabRoot放在我的主页上。

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

continue;

因此，从PageA（或B或C），tabsroot页面的子页面，需要先返回到rootPage。然后从rootPage，我做<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>，这将返回到HomePage

tabsRoot.pop()

再次感谢大家在这里试图提供帮助： - ）

Answer 3

好的，在分析了你的代码之后，似乎问题是你将选项卡放在子页面（TabsRoot）中，其子页面是HomePage。但是，选项卡需要进入根页面（即HomePage）。

因此，尝试将标签HTML标记和代码移动到HomePage（root），它应该可以正常工作。

ionic2模板：每个列表项（主页面）连接到标签结构页面

3 个答案: