映射到了我们以前在管理特性区构建的admin.module.ts 文件。在文件路径后面,我们使用# 来标记出文件路径的末尾,并告诉路由器AdminModule 的名字。打开admin.module.ts 文件,我们就会看到它正是我们所导出的模块类的名字。
export class AdminModule {}
简介
我们已经使CanAcitvate保护AdminModule了,它会阻止对管理特性区的匿名访问。我们在请求时可以异步加载管理类路由,检查用户的访问权,如果用户未登录,则跳转到登陆页面。但更理想的是,我们只在用户已经登录的情况下加载AdminModule,并且直到加载完才放行到它的路由。
我们可以用CanLoad守卫来保证只在用户已经登录并尝试访问管理特性区时才加载一次AdminModule。
几个概念
无组件路由
无组件路由,不借助组件对路由进行分组。来看AdminComponent
下的子路由,我们有一个带path和children的子路由,但它没有使用component。这并不是配置中的失误,而是在使用无组件路由。
const adminRoutes: Routes = [ { path: 'admin', component: AdminComponent, children: [ { // 无组件路由 path: '', children: [ { path: 'crises', component: ManageCrisesComponent }, { path: 'heroes', component: ManageHeroesComponent }, { path: '', component: AdminDashboardComponent } ] } ] } ]; @NgModule({ imports: [ RouterModule.forChild(adminRoutes) ], exports: [ RouterModule ] }) export class AdminRoutingModule {}
预加载: 在后台加载特征区域
每次导航成功发生时,路由器将查看惰性加载的特征区域的配置,并根据提供的策略作出反应。 路由器默认支持两种预加载策略:
完全不预加载,这是默认值。惰性加载特征区域仍然按需加载。
预加载所有惰性加载的特征区域。
路由器还支持,用来精细控制预加载。
自定义预加载策略
Route Data 启动预加载
其中有参数preload布尔值,如果它为true,就调用内置Router
提供的load函数预主动加载这些特征模块。
创建自定义策略
我们将需要实现抽象类PreloadingStrategy和preload方法。在异步加载特征模块和决定是否预加载它们时,路由器调用preload方法。 preload方法有两个参数,第一个参数Route提供路由配置,第二个参数是预加载特征模块的函数。
链接参数数组
链接参数数组保存路由导航时所需的成分:
指向目标组件的那个路由的路径(path)
必备路由参数和可选路由参数,它们将进入该路由的URL
e.g.我们可以把RouterLink指令绑定到一个数组,就像这样:
<a [routerLink]="['/heroes']">Heroes</a>
e.g.在指定路由参数时,我们写过一个双元素的数组,就像这样:
this.router.navigate(['/hero', hero.id]);
e.g.我们可以在对象中提供可选的路由参数,就像这样:
<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>