这篇文章主要介绍“Angular中是如何使用路由的”，在日常操作中，相信很多人在Angular中是如何使用路由的问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular中是如何使用路由的”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
路由的概念在前端的框架中得到了广泛的应用,对于路由的感念不做阐述,路由的应用无外乎就是嵌套、传参，高级一些的功能如懒加载、预加载，再高级一些的如：路由守卫等。本篇我们就一起来看一看在Angular中如何使用路由。
请按照图中结构来创建我们的项目
创建项目&一级模块：
注：通过cli创建的组件会进行自动注册。
起步
1. 在App的html模板中配置
配置路由跳转&路由出口（router-outlet）
<div>
<a [routerLink]="['/login']">登陆</a>｜
<a [routerLink]="['/home']">首页</a>｜
<a [routerLink]="['/mine']">我的</a>
</div>
<!-- 配置路由出口 -->
<router-outlet></router-outlet>
2. 在App的app-routing中配置路由器
const routes: Routes = [
{
path: 'login',
component: LoginComponent,
},
{
path: 'home',
component: HomeComponent,
},
{
path: 'mine',
component: MineComponent,
},
];path支持一个特殊的通配符来支持“**”，当在路由表中没有成功匹配的情况下会最后指向通配符对应的组件
const routes: Routes = [
...
{
path: '**',
component: NotFountComponent,
},
];注意：路由器匹配策略为先到先得，故不具体的路由配置靠后配置。
3. 设置有效的默认路由
由于我们项目默认启动后无具体路由匹配这样并不友好，我们需要设置一个有效的默认路由来展示给用户。
const routes: Routes = [
...
{ path: '', redirectTo: '/home', pathMatch: 'full' },
...
];配置子模块&子路由
此时我们的路由配置全部app-routing，这样对于简单的应用当然是可行的，但是随着应用的迭代、模块的增加显然配置在一起对于管理和扩展都是一项挑战，模块的拆分就成来必然。
1. 为Home组件增加带路由的模块配置
通过cli为Home组件创建带路由的模块配置: ng generate module pages/home/home --module app --flat --routing
imports: [
BrowserModule,
HomeRoutingModule,
AppRoutingModule,
]
注：用cli创建的模块会自动配置到根模块，但我们手动的调整一下顺序将AppRoutingModule移动到最后，满足先到先得的策略。
2. 将Home组件的路由配置转移到home-routing
const routes: Routes = [{
path: 'home',
component: HomeComponent,
}];注：配置好后就可以把app-routing 中的Home组件配置移除了。
3. 补充Home组模块的子组件并配置子路由
const routes: Routes = [{
...
children: [
{
path: 'list',
component: UserListComponent,
},
{
path: 'detail',
component: UserDetailComponent,
},
{
path: 'edit',
component: EditUserComponent,
},
{
path: '',
redirectTo: '/home/list',
pathMatch: 'full'
}
]
}];<div>
<a [routerLink]="['/home/list']">列表</a>｜
<a [routerLink]="['/home/edit']">编辑</a>｜
<a [routerLink]="['/home/detail']">详情</a>
</div>
<!-- 配置路由出口 -->
<router-outlet></router-outlet>
路由传参
1. 在路由定义时配置需要携带的参数令牌
{
path: 'detail/:id',
component: UserDetailComponent
}注：这种将令牌插入到路由path中进行占位的方式中id是必须携带的参数。
<a [routerLink]="['/hero', hero.id]">
使用ActivatedRoute前要在目标组件进行注入
this.route.paramMap.subscribe(
(params: ParamMap) => {
console.log('id :>> ', params.get('id'));
}
)const id = this.route.snapshot.paramMap.get('id')!;ParamMap API：
| 成员 | 说明 |
|---|
has(name) | 如果参数名位于参数列表中，就返回 true。 |
get(name) | 如果这个 map 中有参数名对应的参数值（字符串），就返回它，否则返回 null。如果参数值实际上是一个数组，就返回它的第一个元素。 |
getAll(name) | 如果这个 map 中有参数名对应的值，就返回一个字符串数组，否则返回空数组。当一个参数名可能对应多个值的时候，请使用 getAll。 |
keys | 返回这个 map 中的所有参数名组成的字符串数组。 |
2. 通过Router的navigate跳转页面
当前组件注入Router对象
this.router.navigate(['/home/list']);
this.router.navigate(['/home/list', { id: this.userId, name: this.userName }]);注：矩阵URL标记法：;id=101;name=bom
懒加载
懒加载的目的是将模块的挂载延迟到我们使用的时候，避免首次打开页面就进行整体加载导致页面长时间不可用。
1. 配置无组件路由（空路由）
对路由进行分组而不增加额外的路径片段
{
path: 'home',
loadChildren: () =>
import('./pages/home/home.module').then((m) => m.HomeModule),
}2. 移除根模块中关于Home模块的导入,使得模块完整分离
微调home-routing中home组件的path配置为""
const routes: Routes = [{
path: '',
component: HomeComponent,
children: [
...
]
}];3. 与懒加载相对的预加载
angular中配置懒加载后模块的加载被延迟到来使用时，但是有一些组件是需要优先加载并在使用的时候可以及时运行。
angular中的Router模块提供来两种预加载的策略：
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class SelectivePreloadingStrategyService implements PreloadingStrategy {
preloadedModules: string[] = [];
preload(route: Route, fn: () => Observable<any>): Observable<any> {
// 通过检查路由配置来决定是否做预加载
if (route.data && route.data.preload && route.path != null) {
// 参数1: 要加载的路由
this.preloadedModules.push(route.path);
// 参数2: 加载器
return fn();
} else {
return of(null);
}
}
}到此，关于“Angular中是如何使用路由的”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注天达云网站，小编会继续努力为大家带来更多实用的文章！