# 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跳回首页