angular路由详解六（路由守卫）

路由守卫

CanActivate: 处理导航到某个路由的情况。

CanDeactivate:处理从当前路由离开的情况。

Resole:在路由激活之前获取路由数据。

 

1.CanActivate: 处理导航到某个路由的情况。

新建一个文件PermissionGuard.ts

import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; export class PermissionGuard   implements CanActivate{ canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):boolean{ return false; } } 在路由配置中配置 import { PermissionGuard   } from './../PermissionGuard';

const routes: Routes = [ { path:'message', component: MessageComponent, canActivate:[PermissionGuard], children:[ { path:'messgeMenu', component: MessageMenuComponent, children:[ { path:'list', component: MessageListComponent },{ path:'', component: MessageDetailComponent } ] } ] } ] 在对应的Xxxmodule.ts文件中导入 import { PermissionGuard   } from './../PermissionGuard'; providers:[PermissionGuard] 2.CanDeactivate:处理从当前路由离开的情况 新建一个文件focusGuard.ts import { CanDeactivate } from "@angular/router"; import { XxxComponent } from ''./../xxxComponent"; export class FocusGuard  implements CanDeactivate { canDeactivate(component: XxxComponent ){ if (component.isFoucs()){ return true; }else { return false; }　　 } } 在路由配置中配置 import { FocusGuard  } from './../PermissionGuard'; canDeactivate:[FocusGuard ], 在对应的Xxxmodule.ts文件中导入 import { FocusGuard  } from './../focusGuard'; //其实在实例化对象 providers:[FocusGuard] 3.Resole:在路由激活之前获取路由数据 新建一个stock-resole.service.ts文件 import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; //导入股票数据模块 import { Stock } from './stock'; import { Observable } from 'rxjs/Observable';
@Injectable()
export class StockResolveService implements Resolve{
resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Stock | Observable | Promise{ console.log(new Stock(1,"IBM")); return new Stock(1,"IBM"); } } 在xxx.module.ts文件中注入 import { StockResolveService } from './../stock-resolve.service'; providers:[StockResolveService]

在路由中配置

import { StockResolveService } from './../stock-resolve.service'; const mineRoutes: Routes = [ { path:'mine', component: MineComponent, children: [ {path:'mineMenu',component: MineMenuComponent}, {path:'mineList', component: MineListComponent}  ], resolve:{ stock: StockResolveService } } 如果有用请给点支持，谢谢！

 

转载于:https://www.cnblogs.com/chzlh/p/7718773.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！