Angular中怎么使用路由器？本文就要来带大家了解一下Angular中应用路由器的办法，快速上手Angular路由器，希望能帮助到大家！
路由器这个概念在前端的架构中得到了广泛的应用,针对路由器的念及不去做论述,路由器的应用不外乎便是嵌入、传参，高端一些的功效如懒加载、预加载，再高端一些的如：路由器守护等。这篇咱们就一起来看一看在Angular中怎么使用路由器。【有关实例教程强烈推荐：《angular教程》】
请按照图中结构来建立我们自己的新项目
创建项目&一级控制模块：
ng new angular-router-sampleng g c pages/loginng g c pages/homeng g c pages/mine
注：根据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中配置路由器
一个简单的部件路由器必不可少一个path（路由器的Url）特性和一个component（Url相匹配载入的部件）特性：
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组模块子组件并配备子路由
实行一下指令建立子组件
ng g c pages/home/children/user-listng g c pages/home/children/user-detailng g c pages/home/children/edit-user
为Home路由器配置提升
children特性来配备子组件路由器
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后填补文件格式为
/:key的动态口令团块
{
path: 'detail/:id',
component: UserDetailComponent
}注：这类将动态口令插入到路由器path内进行团块的形式中id是一定要携带主要参数。
根据
routerLink带上主要参数
<a [routerLink]="['/hero', hero.id]">
在Angular获得路由器主要参数需要使用ActivatedRoute:
应用
ActivatedRoute前需在总体目标部件开展引入
this.route.paramMap.subscribe(
(params: ParamMap) => {
console.log('id :>> ', params.get('id'));
}
)方法2: 获取参数(只掌握到初值)
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模块给予来二种预加载的思路：
一点不预加载，这也是初始值。可塑性载入的特点区依然会按需加载。
预加载全部可塑性载入的特点区。
改动方法：RouterModule.forRoot()的参数二的目标适用设定载入方式的特性
preloadingStrategy，PreloadAllModules： 预加载有一定的控制模块
NoPreloading: 默认设置，没有进行预加载
那么可有可无的特性一定要适用自定，我们来看一下：
当需要预加载的路由配置目标中加入data目标并提高
preload特性，值设为true表明打开预加载。根据cli来生成一个服务项目用于进行我们自己的预加载对策：
ng generate service selective-preloading-strategy把我们建立的服务项目实现接口
PreloadingStrategy自定的方案和默认设置鼓励的二种对策操作方法一致。
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路由器课程的学习梳理，针对路由器也有一块守护并没有提及，大家挤时间再去整理一下。
大量程序编写基本知识，请访问：编程学习！！
以上就是关于探讨Angular中怎么使用路由器？的具体内容，大量欢迎关注AdminJS其他类似文章！