使用新 Ionic 导航（第 4 版）答案

【问题标题】：Navigation with new Ionic (version 4)使用新 Ionic 导航（第 4 版）
【发布时间】：2018-02-03 12:49:07
【问题描述】：

直到 Ionic3，它与 Angular.js 紧密结合。所以导航工作可能是由一些 Angular.js 功能完成的。我可能是错的，因为我之前没有使用过 Ionic 或 Angular.js。

Ionic4 将与框架无关，使用 Stencil.js 编写并使用 Stencil.js 编译器 编译为 Web 组件 标准组件。

我想知道导航任务将如何处理，由谁处理？ Ionic4 有路由功能吗？或者它没有，并且必须使用开发人员选择的客户端路由器，特别是我想知道 Stencil.js 的用例，因为它也有一个路由器。例如，如何将它用于选项卡式应用程序的标记和样式，以及使用 Stencil.js 进行路由？

【问题讨论】：

【解决方案1】：

Ionic 现在将使用angular router。它将利用有角的路由器插座。对于选项卡式应用程序标记，每个选项卡都将提供一个named router outlet。在这里阅读更多：

【讨论】：

【解决方案2】：

Ionic 4 现在将使用角度路由方法而不是默认的 ionic 3（推送/弹出）方法。必须阅读 ionic 团队的迁移说明。

【讨论】：

【解决方案3】：

Ionic 有一个用于简单导航的组件：https://ionicframework.com/docs/api/nav

但它用于在不影响浏览器 url 的模式中进行简单导航。

这种导航是通过调用元素上的方法来控制的，所以在 Angular 中你必须使用 @ViewChild 并且处理状态和拥有深度导航树变得很复杂。

您应该在大部分视图中使用客户端路由器，以利用代码拆分和延迟加载 js 包。

【讨论】：