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

}

}

若是有用請給點支持，謝謝！