路由守衛

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 implementsCanDeactivate <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
}
}
如果有用請給點支持，謝謝！

每一步都是一個深刻的腳印

總結

以上是生活随笔為你收集整理的angular路由详解六（路由守卫）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。