Ionic导航和路由

导航意味着用户如何在Ionic应用程序中的不同页面之间移动。在Ionic 4中, 导航已进行了许多更改。例如, v4可以与官方的Angular Router集成, 而不必使用Ionics自己的navController。它为整个应用程序提供了更一致的路由体验。 Angular Router是Angular应用程序中最重要的库。如果不可用, 则该应用程序无法在重新加载浏览器时保持其导航状态。因此, 借助Ionic框架和Angular Router, 你可以创建可链接且具有丰富动画的丰富应用程序。

传统的网站使用线性历史记录, 用户可以浏览到所需的页面, 并且可以按“上一步”按钮向后浏览。但是, 在Ionic Framework中, 应用程序可以通过允许并行导航来实现这一目标。这意味着它具有多个导航堆栈, 并且可以随时交换它们。

Ionic的最新版本使用导航堆栈来实现页面之间的导航。它可以简单地作为页面堆栈使用, 其中一个页面ID位于另一页面的顶部。众所周知, 堆栈只能访问顶层元素。 Ionic具有类似的概念, 你只能在导航堆栈顶部查看页面。如果要导航到另一个页面, 则需要执行以下两个操作之一：

• 推入：将页面推入堆栈。这意味着将元素放在顶部。因此, 当你导航到页面时, 会将页面推入堆栈顶部。
• 弹出：弹出页面, 直到目标页面位于顶部。但是, 必须将页面放在导航堆栈中, 你之前已经导航到该页面。因此, 当你从页面导航时, 你是从堆栈顶部弹出页面。

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

情况1

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

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

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

$ ionic g page animals

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

{ path: 'animals', loadChildren: './animals/animals.module#AnimalsPageModule' }{ path: 'animals', loadChildren: './animals/animals.module#AnimalsPageModule' }

在app.component.html中, <ion-router-outlet>组件负责在应用程序中呈现页面。它专门用于Ionic路由, 其工作原理与常规角路由器组件相同。

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

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Navigation
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <p>The world is your oyster.</p>
    <ion-button href="/animals">ANIMALS</ion-button>
  </div>
</ion-content>

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

单击“动物”按钮时, 将导航到“动物”页面。它可以显示在下面的屏幕中。

情况二

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

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

<ion-button (click)="go()">Go</ion-button>

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

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  constructor(private router: Router) {}

  go() {
    this.router.navigate(['animals']);
  }
}

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

<ion-buttons slot="start" (click)="goBack()">Back</ion-buttons>

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

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-animals', templateUrl: './animals.page.html', styleUrls: ['./animals.page.scss'], })
export class AnimalsPage implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }
  goBack() {
    this.router.navigate(['home']);
  }
}

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

现在, 单击“转到”按钮, 你将导航到“动物”页面。在此页面上, 当你单击“后退”按钮时, 页面将自动导航到主页。

情况3

导航也可以通过使用URL来执行。你可以在以下示例的帮助下理解它。

步骤1：在动物页面内创建一个新组件。要创建组件, 请执行以下命令。

$ ionic g c animals/profile

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { AnimalsPage } from './animals.page';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  {
    path: '', component: AnimalsPage
  }, {
    path: ':id', component: ProfileComponent
  }
];

@NgModule({
  imports: [
    CommonModule, FormsModule, IonicModule, RouterModule.forChild(routes)
  ], declarations: [AnimalsPage, ProfileComponent]
})
export class AnimalsPageModule {}

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

<ion-button href="/animals/someid">ANIMALS</ion-button>

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

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })
export class HomePage {
  constructor(private router: Router) {}

  go() {
    this.router.navigateByUrl('/animals');
  }
}

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

单击动物按钮, 你将在配置文件组件上导航。

案例4

你还可以通过从URL中提取ID来使上述示例更加动态。为此, 我们需要使用名为antivatedRoutes的角度服务。以下示例对其进行了更清晰的说明。

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

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-profile', templateUrl: './profile.component.html', styleUrls: ['./profile.component.scss'], })
export class ProfileComponent implements OnInit {
  id: any;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
  }
}

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

<p>
  Profile components Routing Works Great! for ID {{ id }}
</p>

步骤3：现在, 执行应用程序, 你将获得以下输出。每次导航到其他URL时, 都会在UI中显示不同的ID。