[TOC]
本指南介绍了如何使用Ionic和Angular构建路由和应用程序。
Angular Router是Angular应用程序中最重要的库之一。没有它，应用程序将是单视图/单个上下文应用程序，或者无法在浏览器重新加载时维护其导航状态。使用Angular Router，我们可以创建可链接且具有丰富动画的丰富应用程序（当然与Ionic配对时）。让我们看一下Angular路由器的基础知识以及我们如何为Ionic应用程序配置它。
## 一条简单的路线
对于大多数应用程序，通常需要使用某种路径。最基本的配置看起来有点像这样：
~~~
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
...
RouterModule.forRoot([
{ path:
imports: [
...
RouterModule.forRoot([
{ path: '', component: LoginComponent },
{ path:
{ path: 'detail', component: DetailComponent },
])
],
})
])
],
})
~~~
我们这里最简单的细分是路径/组件查找。当我们的应用程序加载时，路由器会通过读取用户尝试加载的URL来启动。在我们的示例中，我们的路线寻找`''`，这基本上是我们的索引路线。所以为此，我们加载了`LoginComponent`。非常坦率的。对于路由器配置中的每个条目，这种与组件匹配的路径模式都会继续。但是如果我们想在初始加载时加载不同的路径呢？
## 处理重定向
为此，我们可以使用路由器重定向。重定向的工作方式与典型路由对象的工作方式相同，但只包含一些不同的密钥。
~~~
[
{ path:
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path:
{ path: 'login', component: LoginComponent },
{ path:
{ path: 'detail', component: DetailComponent }
];
];
~~~
在我们的重定向中，我们寻找应用程序的索引路径。然后，如果我们加载它，我们重定向到`login`路线。最后一个密钥`pathMatch`需要告诉路由器它应该如何查找路径。
自从我们使用以来`full`，我们告诉路由器我们应该比较完整路径，即使最终是类似的`/route1/route2/route3`。意思是如果我们有：
~~~
{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' },
{ path:
{ path: 'login', component: LoginComponent },
~~~
并加载`/route1/route2/route3`我们将重定向。但是如果我们加载了`/route1/route2/route4`，我们就不会重定向，因为路径不完全匹配。
或者，如果我们使用：
~~~
{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' },
{ path:
{ path: 'login', component: LoginComponent },
~~~
然后同时加载`/route1/route2/route3`和`/route1/route2/route4`，我们会被重定向的两条路线。这是因为`pathMatch: 'prefix'`只匹配部分路径。
## 导航到不同的路线
谈论路线是好的，但是如何实际导航到所述路线？为此，我们可以使用该`routerLink`指令。让我们回过头来看看我们之前简单的路由器设置：
~~~
RouterModule.forRoot([
{ path:
{ path: '', component: LoginComponent },
{ path:
{ path: 'detail', component: DetailComponent }
]);
]);
~~~
现在`LoginComponent`，我们可以使用以下HTML导航到详细路径。
~~~
<ion-header>
<ion-toolbar>
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-button [routerLink]="['/detail']">Go to detail</ion-button>
</ion-content>
~~~
这里的重要部分是`ion-button`和`routerLink`指令。RouterLink的工作原理与典型`href`的类似，但不是将URL构建为字符串，而是可以构建为数组，这可以提供更复杂的路径。
我们还可以使用路由器API以编程方式在我们的应用程序中导航。
~~~
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
...
})
...
})
export class LoginComponent {
constructor(private router: Router){}
navigate(){
navigate(){
this.router.navigate(['/detail'])
}
}
}
}
~~~
两个选项都提供相同的导航机制，只适合不同的用例。
> 关于使用相对URL进行导航的说明：目前，为了支持多个导航堆栈，不支持相对URL
## 懒加载路线
现在我们的路由设置的当前方式使得它们被包含在与根app.module相同的块中，这是不理想的。相反，路由器有一个设置，允许组件隔离到自己的块。
~~~
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
...
RouterModule.forRoot([
{ path:
imports: [
...
RouterModule.forRoot([
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path:
{ path: 'login', loadChildren: './login/login.module#LoginModule' },
{ path:
{ path: 'detail', loadChildren: './detail/detail.module#DetailModule' }
])
],
})
])
],
})
~~~
虽然类似，但`loadChildren`属性是一种通过字符串而不是直接引用模块来引用模块的方法。为了做到这一点，我们需要为每个组件创建一个模块。
~~~
...
import { RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
@NgModule({
imports: [
...
RouterModule.forChild([
{ path:
imports: [
...
RouterModule.forChild([
{ path: '', component: LoginComponent },
])
],
})
])
],
})
~~~
> 我们排除了一些额外的内容，仅包括必要的部分。
在这里，我们有一个典型的角度模块设置，以及一个RouterModule导入，但我们现在正在使用`forChild`和声明该设置中的组件。通过这种设置，当我们运行构建时，我们将为app组件，登录组件和detail组件生成单独的块。
## 使用标签
使用Tabs，Angular Router提供Ionic机制来了解应该加载哪些组件，但繁重的工作实际上是由tabs组件完成的。我们来看一个简单的例子。
~~~
const routes: Routes = [
{
path:
{
path: 'tabs',
component: TabsPage,
children: [
{
path:
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path:
children: [
{
path: '',
loadChildren:
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path:
}
]
},
{
path: '',
redirectTo:
redirectTo: '/tabs/tab1',
pathMatch:
pathMatch: 'full'
}
]
},
{
path:
}
]
},
{
path: '',
redirectTo:
redirectTo: '/tabs/tab1',
pathMatch:
pathMatch: 'full'
}
];
}
];
~~~
这里我们有一个“标签”路径，我们加载。在此示例中，我们将路径称为“tabs”，但路径的名称将打开以进行更改。它们可以被称为适合您的应用程序。在该路由对象中，我们也可以定义子路由。在此示例中，顶级子路由“tab1”充当我们的“出口”，并且可以加载其他子路由。对于此示例，我们有一个子子路由，它只加载一个新组件。选项卡的标记如下：
~~~
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="flash"></ion-icon>
<ion-label>Tab One</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
~~~
如果您之前使用Ionic构建应用程序，这应该会让您感到熟悉。我们创建一个`ion-tabs`组件，并提供一个`ion-tab-bar`。在`ion-tab-bar`提供了一个`ion-tab-button`具有`tab`一个与在路由器配置的标签“出口”相关联的属性。请注意，最新版本`@ionic/angular`不再需要`<ion-tab>`，但允许开发人员完全自定义选项卡栏，并且单一事实源存在于路由器配置中。
- 入门
- 介绍
- 什么是Ionic Framework？
- 核心概念
- 浏览器支持
- 版本
- 支持
- 安装
- CLI安装
- 程序包和CDN
- 环境设置
- iOS安装
- Android安装
- 建造项目
- 开始
- 创建
- 项目迁移
- 跨平台
- 运行概述
- 在iOS上运行
- 在Android上运行
- 测试
- 做出贡献的
- web视图
- ionic存储
- 布局
- 结构体
- 响应式网格
- CSS实用工具
- 主题化
- 基本
- 平台样式
- CSS变量
- 高级
- 导航
- Angular
- 编译和发布
- 渐进式Web应用程序
- iOS App Store
- Android Play商店
- PC桌面应用程序
- 常问问题
- 名词解释
- 构建错误 Build Errors
- 运行时错误 Runtime Errors
- 本机错误 Native Errors
- 开发人员提示 Developer Tips
- 更多资源
- 书籍
- 课程
- 实战项目
- 帖子
- 工具
- 视频
- UI组件
- 弹出式菜单 ion-action-sheet
- 弹出菜单控制器 ion-action-sheet-controller
- 弹出式菜单 ion-action-sheet
- 弹出警告 ion-alert
- 弹出警告控制器 ion-alert-controller
- 命令行 CLI
- 原生API