# angular路由守衛 ## 1、CanActivate 進入路由時攔截 建立實現CanActivate接口的文件 ~~~ import {CanActivate} from "@angular/router"; export class CanActivateGuard implements CanActivate{ canActivate(){ return window.confirm("是否進入"); } } ~~~ 打開app.module.ts;注入服務 ~~~ providers: [CanActivateGuard], ~~~ 打開路由配置文件添加守衛 ~~~ const routes: Routes = [ { path:'', redirectTo:'/index', pathMatch:'full' }, { path: 'index', component:Tab1Component }, { path: 'secound', component:Tab2Component, canActivate:[CanActivateGuard] }, ]; ~~~ html中a標簽 ~~~ <a [routerLink]="['/index']">首頁</a> <a [routerLink]="['/secound']" >CanActivate</a> <router-outlet></router-outlet> ~~~ 點擊CanActivate彈出彈窗  點擊取消  點擊確定進入  ## 2、canDeactivate 離開路由時攔截 建立實現CanDeactivate接口的文件 ~~~ import {CanDeactivate} from "@angular/router"; import {Tab2Component} from '../tab2/tab2.component'; export class CanDeactivateGuard implements CanDeactivate<Tab2Component>{ canDeactivate(component: Tab2Component){ component.fun() return window.confirm("確定離開？") } } ~~~ 與之不同的是這次能清楚知道在哪個組件中離開，這個接口要實現一個泛型，這個泛型就是指定當前組件的類型 例子中為Tab2Component canDeactivate()傳入一個參數通過聲明類型方式得到組件并可以使用組件中的方法fun() ~~~ export class Tab2Component implements OnInit { constructor() { } ngOnInit() { } fun(){ console.log("組件內方法") } } ~~~ 打開app.module.ts;注入服務 ~~~ providers: [CanActivateGuard,CanDeactivateGuard], ~~~ 打開路由配置文件添加守衛 ~~~ const routes: Routes = [ { path:'', redirectTo:'/index', pathMatch:'full' }, { path: 'index', component:Tab1Component }, { path: 'secound', component:Tab2Component, canActivate:[CanActivateGuard], canDeactivate:[CanDeactivateGuard] }, ]; ~~~ 測試（進入路由點擊首頁）  控制臺  點擊確定（到達首頁）  ## 3、Resolve 進入路由前為路由提供數據 建立實現resolve接口的文件 ~~~ import {ActivatedRouteSnapshot,Router,Resolve,RouterStateSnapshot} from '@angular/router'; import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; @Injectable() export class RsolveDuard implements Resolve<any>{ constructor(private router:Router){ } resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any | Observable<any> | Promise<any> { let Id:number=route.params['id']; if(Id==1){ return {id:123456,name:"這是名字"}; }else { this.router.navigate(['/index']); } } } ~~~ resolve()傳入的兩個參數route可以獲取路由傳入參數，state擁有一些路由的狀態 同時在構造函數中注入Router，需要引入@Injectable()注入器才會有值 功能是傳入參數為1返回一個數據，否則跳入首頁 打開app.module.ts;注入服務 ~~~ providers: [CanActivateGuard,CanDeactivateGuard,RsolveDuard], ~~~ 打開路由配置文件添加守衛 ~~~ const routes: Routes = [ { path:'', redirectTo:'/index', pathMatch:'full' }, { path: 'index', component:Tab1Component }, { path: 'secound/:id', component:Tab2Component, resolve:{ Data:RsolveDuard, } }, ]; ~~~ resolve屬性后面的就是傳入的數據，RsolveDuard即為返回的值 在組件中獲取這個值 ~~~ export class Tab2Component implements OnInit { constructor(private routerInfo:ActivatedRoute) { } public id; public name; ngOnInit() { this.routerInfo.data.subscribe((val)=>{ this.id=val.Data.id; this.name=val.Data.name; }); } } ~~~ 跳轉路由時傳入的值一個為1一個為2 ~~~ <a [routerLink]="['/index']">首頁</a> <a [routerLink]="['/secound',1]" >id=1</a> <a [routerLink]="['/secound',2]" >id=2</a> <router-outlet></router-outlet> ~~~ 點擊id=1把id和name展示在頁面上  點擊id=2跳回首頁