Ionic 3：在指定选项卡上推送页面

Posted 2023-03-13

【中文标题】Ionic 3：在指定选项卡上推送页面

【英文标题】：Ionic 3: Pushing a page on specified tab

【发布时间】：2018-09-03 14:18:17

【问题描述】：

情况

我正在创建一个应用程序，该应用程序包含一个包含<ion-tabs> 的根页面，每个标签页都是一个主-详细信息模式的“母版页”（见下图）。

Diagram of my project structure

我的目标

现在，我正尝试从我的 TabsPage 直接进入详细信息页面，因为我的 标签栏 中有一个 FAB，它打开一个 QR-Code-Scanner，结果应该会从该页面得到详细信息页面（基于已扫描的 id）。

我已经尝试过的

我已经尝试了几种方法，最好的解决方案 （但仍然无法按预期工作）正在使用

let navCtrl: NavController = this.app.getRootNav();
nav.push(DetailPageA,  id: scannedId );

在我的tabs.ts 文件中。

不幸的是，使用这种方法，它将详细信息页面“推到”TabsPage 上，从而隐藏了 标签栏。

我的问题：

是否可以将详细信息页面“推入”选项卡（从选项卡“外部”），结果与通过母版页“手动”进入那里相同（即保留 tabbar可见并且在详细信息页面上有navCtrl.pop()会导致“返回”到母版页）？

提前谢谢你。

【问题讨论】：

您需要从哪里推送到详细信息页面？你在第一个标签的第一个屏幕上？

@CodeChanger 未定义：由于 FAB 显示在 tabbar 中，因此可以从选项卡的任何“子页面”访问它。这就是为什么我怀疑我必须以编程方式转到第一个选项卡的根并在此之后推送页面。但到目前为止，我还没有让它发挥作用。

【参考方案1】：

在要打开详细信息页面的页面中导入App

import  App  from 'ionic-angular';

然后使用下面的代码在标签中推送您想要的页面：-

this.app.getActiveNav().push(DetailPageA);

【讨论】：

那么你的目标实现了吗？？