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 <XxxComponent > {
 
　　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<Stock>{

　　resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Stock | Observable<Stock> | Promise<Stock>{
　　　　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
}
}
如果有用请给点支持，谢谢！

 

每一步都是一个深刻的脚印