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

ps：这里是通过路由守卫传递的数据并非是路由传参

完