Ionic 导航和路由

导航是指用户如何在 Ionic 应用程序的不同页面之间移动。在 Ionic 4 中，导航有了很多变化。例如，v4 没有使用 Ionics 自己的 navController，而是能够与官方的 Angular Router 集成。它为整个应用程序提供了更一致的路由体验。Angular Router 是 Angular 应用程序中最重要的库。如果它不可用，应用程序就无法在浏览器重新加载时维护其导航状态。因此，借助 Ionic 框架和 Angular Router，您可以创建可链接且具有丰富动画的应用程序。

传统的网站使用线性历史记录，用户导航到所需的页面，然后可以按 后退按钮 导航返回。但是，在 Ionic 框架中，应用程序可以通过允许并行导航来做到这一点。这意味着它有多个导航堆栈，并且可以随时交换它们。

最新版本的 Ionic 使用 导航堆栈 来实现页面之间的导航。它就像一个页面堆栈，其中一个页面位于另一个页面的顶部。众所周知，堆栈只能访问顶部元素。Ionic 也有类似的概念，您只能查看导航堆栈顶部的页面。如果要导航到另一个页面，您需要执行以下两个操作之一

• Push: 将页面推送到堆栈上。这意味着将元素放在顶部。因此，当您导航到页面时，您将页面推到堆栈的顶部。
• Pop: 弹出页面，直到您的目标页面位于顶部。但是，您必须将您的页面放在导航堆栈上，您之前已经导航到该页面。因此，当您从页面导航时，您是从堆栈顶部弹出页面。

让我们逐步了解如何在 Ionic 应用程序的不同页面之间导航。

情况 1

以下示例解释了应用程序中的基本导航。

步骤 1： 创建一个 新项目。您可以从 此处 了解如何在 Ionic 4 中创建项目。

步骤 2： 创建一个 新页面。此页面用于导航。

步骤 3： 新创建的页面会自动将其路径添加到 app-routing.module.ts 文件中，如下所示。

在 app.component.html 中，<ion-router-outlet> 组件负责在应用程序中呈现页面。它专门用于 ionic 路由，其工作方式与常规 angular-router 组件相同。

步骤 4： 创建页面后，打开 home.page.html 文件并添加以下代码。

步骤 5： 现在，运行该项目。出现以下屏幕。

当您单击 Animals 按钮 时，您将导航到 Animals 页面。它可以在下面的屏幕中显示。

情况 2

用户还可以通过 编程方式 在页面之间导航，这可以从下面的示例中理解。

步骤 1： 在 home.page.html 文件中添加以下按钮。

步骤 2： 打开 home.page.ts 文件并插入以下代码。

步骤 3： 打开 animals.page.html 并添加以下按钮以在上一页上导航。

步骤 4： 打开 animals.page.ts 文件并插入以下代码。

步骤 5： 执行应用程序。出现以下屏幕。

现在，单击 Go 按钮，您将导航到 Animals 页面。在此页面上，当您单击 返回按钮 时，该页面会自动导航到主页。

情况 3

导航也可以使用 URL 执行。您可以借助以下示例来理解它。

步骤 1： 在 animals 页面 中创建一个新的 组件。要创建组件，请执行以下命令。

步骤 2： 接下来，打开 animals.module.ts 文件并导入 ProfileComponent。然后，为 Profile 组件添加路由以及 id。在 animals.module.ts 文件中添加以下代码段。

步骤 3： 打开 home.page.html 文件并添加以下按钮。在这里，我们将为路由传递路径中的一些 随机 id。

步骤 4： 打开 home.page.ts 文件并插入以下代码。

步骤 4： 现在，执行应用程序，您将获得以下屏幕。

单击 Animals 按钮，您将导航到 profile 组件。

情况 4

您还可以通过从 URL 提取 id 来使上述示例更具动态性。为此，我们需要使用一个名为 antivatedRoutes 的 angular 服务。以下示例更清楚地解释了这一点。

步骤 1： 打开 profile.component.ts 文件并插入以下代码。

步骤 2： 打开 profile.component.html 文件并添加以下代码。在这里，我们将显示 id，该 id 将始终返回在 URL 中传递的新 id。

步骤 3： 现在，执行应用程序，您将获得以下输出。每次您导航到不同的 URL 时，您都将获得在 UI 中显示的不同 id。