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

【问题标题】：ionic2 template: Each list item (main page) connect to tabs structure pageionic2模板：每个列表项（主页面）连接到标签结构页面
【发布时间】：2017-07-03 12:12:41
【问题描述】：

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

在我的 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 中，我有一个“批准”按钮。如果用户批准工作流程，我会显示一条 toast 消息，然后我想弹回我的待办事项列表。（我的主页）。

// 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

下面是我的元素布局：

HomePage -> TabRoot（包括 PageA、PageB 和 PageC）。 HomePage 是 Tabs 的父页面。

【问题讨论】：

当您运行this.navCtrl.pop() 时，应用程序会返回但抛出错误，还是甚至不会返回？另外，你能告诉我你使用的是哪个版本的 Ionic 2 吗？如果您不知道，只需在 CLI 上运行 ionic info，版本就在“Ionic Framework 版本：”之后。
谢谢 :-) 应用程序抛出错误消息并且不会返回。以下是我的离子信息：您的系统信息： Cordova CLI：6.5.0 Ionic Framework 版本：2.0.0 Ionic CLI 版本：2.2.1 Ionic App Lib 版本：2.2.0 Ionic App Scripts 版本：1.1.0 ios-deploy 版本：1.9.1 ios-sim 版本：5.0.10 操作系统：OS X El Capitan 节点版本：v6.9.5 Xcode 版本：Xcode 8.2.1 Build 版本 8C1002
好的，现在在您的 HomePage 类中，您有 selectItem() 方法，我猜是标签调用该方法来更改“当前标签”吗？
没有。 selectItem() 函数只能从 HomePage 视图（HomePage 的 html）中调用。（每个工作流项目都有 3 个选项卡中的详细信息）。
好的，您能否更新您的问题，添加主页模板的完整 HTML？我想我有一个答案。

标签： angular firebase firebase-realtime-database ionic2

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

所以，从PageA（或B或C），tabsroot页面的子页面，需要先回到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(); 
   });
}

再次感谢大家在这里提供帮助:-)

【讨论】：

【解决方案3】：

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

所以，尝试将标签页的 HTML 标记和代码移动到主页（根），它应该可以工作。

【讨论】：