问题标签 [ion-nav]

在我的用例中，我想在我的 ionic 3 angular 应用程序中显示侧面菜单和选项卡。用例是：最初显示带有隐藏侧菜单的选项卡（设置为启用（假））。第一个页面显示一个添加到购物车的按钮，这样做会在标题区域显示一个购物车，然后单击购物车会显示一个登录页面。一旦你登录，订单摘要页面就会出现。此时我想显示侧面菜单。所以在ionviwedidload我设置menu.enable(true). 虽然它显示了菜单图标，但实际菜单没有出现。

最小的测试用例是https://www.dropbox.com/s/tq202w3p6yf32fj/tab-menu_app.zip?dl=0

尝试：

1. 运行应用程序
2. 单击添加到购物车按钮
3. 单击右侧标题中的购物车
4. 这将带来登录页面模型。单击登录按钮
5。摘要页面显示菜单图标。点击它什么也没做

这样做的最佳方法是什么？

我有三个选择，但我不喜欢其中任何一个。

选项1：

• TabsPage 2：像“页脚”一样创建“A、B、C”</li>
• 在配置选项中禁用子页面选项卡（取出选项卡“1、2、3”）
• GO：使用“NavBar Push(Screen2)”。
• 返回：“NavBar pop()”</li>

问题：

1. 使用“Footer”而不是“ion-tab”创建选项卡“A、B、C”</li>

选项 2：

• 对“screen2”使用“模态形式”。
• 标签页 2:
  • 像“页脚”一样创建“A、B、C”</li>
  • 手动创建“后退按钮”</li>
• GO：查看模态
• 返回：关闭模式

问题：

1. 使用“Footer”而不是“ion-tab”创建选项卡“A、B、C”</li>
2. 后退按钮不会自动生成。

选项 3：

• 为“1、2、3”和“A、B、C”创建两个带有“ion-tabs”的“TabsPage”。
• 去：this.appCtrl.getRootNav().setRoot(TabsPage2)
• 返回：this.appCtrl.getRootNav().setRoot(TabsPage1)

问题：

1. “TabsPage 1”过滤选项和位置在“返回”时丢失。

我有一个使用 ionic 3 开发的项目。但是我休息了一下，当我再次开始使用 ionic 时，我看到导航系统在新版本中发生了变化。我的项目是一个简单的项目。该项目列出了 a 数组中的数据以及有关数据的详细信息，显示在不同的页面上。

我在 Ionic 3 上这样做： homepage.ts

详细信息页面.ts

NavCtrl 和 NavParams 在版本 5 中不再可用（我认为在版本 4 中）。我确实从主页导航到下一页（离子 5）。 主页.ts：

但是，我无法根据列表中的数据进行导航。根据下一代版本如何做到这一点？

我想通过创建页面组件（将在侧面菜单上的项目）来路由页面，以便于路由。我也有点知道要使用哪些代码进行路由，但不知道在哪里使用它，因为在错误的地方使用代码不会为我提供任何解决方案。

This is my app.component.ts file.

下面是app-routing.module.ts文件。

如果我还需要修改每个菜单项的 html 文件，请告诉我。如果可能，请尝试用外行的方式向我解释。

我的应用程序导航是这样的：

• 登录页面（设置为 Root）
• TabsPage（设置为Root，登录成功后）
  • ListPage（离子标签根）
    • FilterPage（以模式打开）
    • DetailsPage（页面被推送）
  • SearchPage（离子标签根）
  • SettingsPage（离子标签根）
    • 历史（页面被推送）
      • HistoryDe​​tailsPage（页面被推送）

问题有点像这个问题。但这对我没有帮助。

问题：

每当我从推送的页面或 ion-tab 根页面按下硬件后退按钮时，我只会在 app.component.ts 的后退按钮事件中看到 nav.getViews() 的 ["TabsPage"]。如何在该全局后退按钮事件中获取 Pushed Page 的名称？

参考代码：

app.component.ts：

我对 ionic 很陌生，并且有一个简单的问题，令我惊讶的是，我在搜索的任何地方都找不到我的答案。

我想要的是像这样实现简单的页面导航： https ://ionicframework.com/docs/api/nav

手机下方的源代码提供了 javascript 代码，但我想要 angular/ionic 代码。

任何其他文档都使用复杂的代码，由于某种原因我无法理解。

我如何使用最简单的 IONIC-5/Angular 代码（使用“ion-nav”）来归档这个目标？

HTML：

这就是我到目前为止所做的：

TS：

PS：nav.push('nav-detail', { tech }); 给出错误（我不知道这里的导航是什么）