app.module.ts
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
// ....
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
CanActivateGuard, CanDeactivateGuard 需要provider
const routes: Routes = [
{
path: 'tutorial', loadChildren: './tutorial/tutorial.module#TutorialModule',
canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
},
{
path: 'community', component: CommunityComponent, canActivate: [CanActivateGuard], canDeactivate:
[CanDeactivateGuard]
},
];
// preloadingStrategy 预加载其他模块
@NgModule({
imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
exports: [RouterModule],
providers: [CanActivateGuard, CanDeactivateGuard]
})
export class AppRoutingModule { }
tutorial.module.ts
在该文件中需要引入tutorial用到所有的component。
@NgModule({
declarations: [
TutorialSlideComponent,
TutorialStartedComponent,
TutorialModelComponent,
TutorialAnalysisComponent,
TutorialSurveyComponent,
TutorialComponent
],
imports: [
TutorialRoutingModule,
CommonModule,
FormsModule
],
})
export class TutorialModule {}
注意 CommonModule 引入,因为主路由模块已经引入 BrowserModule,在子路由模块中引入CommonModule就可以
tutorial-routing.module.ts
const routes: Routes = [
{
path: '', component: TutorialComponent, // path 设为''
children: [
{
path: '', redirectTo: 'started', pathMatch: 'full', canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
},
{
path: 'started', component: TutorialStartedComponent, canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
},
{
path: 'model/api', component: TutorialModelComponent, canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
},
{
path: 'topic/analysis/ae', component: TutorialAnalysisComponent,
canActivate: [CanActivateGuard], canDeactivate: [CanDeactivateGuard]
},
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class TutorialRoutingModule { }
注意: 使用RouterModule.forChild(routes),
路由拦截
CanActivateGuard
@Injectable()
export class CanActivateGuard implements CanActivate {
path: ActivatedRouteSnapshot[];
route: ActivatedRouteSnapshot;
constructor(
private router: Router,
private appService: AppService
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
console.log('route', route);
console.log('state', state);
this.appService.createTime = new Date();
// return true;
return true;
}
}
CanDeactivateGuard
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
constructor(
private router: Router,
private appService: AppService
) { }
canDeactivate(
component: CanComponentDeactivate,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
) {
const duration = new Date().getTime() - new Date(this.appService.createTime).getTime();
const params = { user: 'tourist', route: state.url, duration };
return this.appService.addVisitRecord({data: params}).pipe(
filter(i => i != null),
map(data => {
return true;
})
);
}
}
网友评论