在Angular 8中,延迟加载路由和守卫可以通过以下步骤来实现:
ChildModule
),用于延迟加载的组件。// child.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ChildComponent } from './child.component';
@NgModule({
declarations: [ChildComponent],
imports: [
CommonModule,
RouterModule.forChild([
{ path: '', component: ChildComponent }
])
]
})
export class ChildModule { }
AppModule
)使用loadChildren
来加载延迟加载的模块。// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'child', loadChildren: './child.module#ChildModule' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
canLoad
来控制延迟加载的模块是否加载成功。// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanLoad {
canLoad(route: Route, segments: UrlSegment[]): boolean {
// 检查用户是否有权限加载模块
return true;
}
}
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: 'child', loadChildren: './child.module#ChildModule', canLoad: [AuthGuard] }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
上述代码示例中,ChildModule
是延迟加载的模块,ChildComponent
是延迟加载模块中的组件。AppRoutingModule
是主模块中的路由配置模块。AuthGuard
是一个用于控制延迟加载模块加载的守卫。
这样配置后,在访问/child
路径时,会根据canLoad
守卫的结果来判断是否加载延迟加载的模块。如果canLoad
返回true
,则加载延迟加载的模块和组件;如果返回false
,则不加载延迟加载的模块和组件。