Angular4基本功【路由守卫与辅助】

背景

最近在前端项目中用到angular守卫功能和路由辅助，这次主要介绍的辅助路由和守卫路由，光听名词就可以知道什么是辅助路由，什么是守卫路由，辅助就是辅助的大臣起不到主的作用，守卫就是必须满足一定的条件才可以进行

---

辅助

---

根据一下步骤就可以完成
1.在app组件的模板上定义一个插座来显示内容
2 单独开发一个聊天室组件，只显示在新定义的插座上
3通过路由参数控制新插座是否显示内容

---

1在app下面定义一个插座，name属性的原因是因为我们根据name属性进行更好的配置，插座的作用就是在下面显示内容

<router-outlet name="aux"></router-outlet>

2建立一个新的组件，显示的信息

<textarea placeholder="请输入聊天内容" class="chat"></textarea>

3通过路由参数来控制，当我们点击这儿组件的她会辅助我们找到我们的aux插座，也就是1位置的插座，然后让2的内容显示到1插座中

{path:'chat',component:ChatComponent,outlet:'aux'},

<a [routerLink]="[{outlets:{aux:'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets:{aux:null}}]">结束聊天</a>

---

路由守卫

---

路由守卫总共分为3个
1CanActivate：处理导航到某路由的情况，根据一定的条件判断是否导航到某路由
2CanDeactivate:处理从当前路由离开的情况
3Resolve：在路由激活之前获取路由情况

---

CanActivate
在这里使用到了依赖注入的原理，其实就是不用开发人员进行手动的实例化。

import{CanActivate }  from "@angular/router";

export class LoginGuard implements CanActivate{
   canActivate(){
       //根据返回的路由请求是true或者是false来判断你是否通过
       //如果生成的书小于true
        let loggedIn:boolean =Math.random()<0.5;
        if(!loggedIn){
            console.log("用户为登陆")
        }
       return loggedIn;
   }
}

  children:[
    {path:'',component:ProductDescComponent},
    {path:'seller/:id',component:SellerInfoComponent}
    ],canActivate:[LoginGuard],
    canDeactivate:[UnsavedGuard]},

---

CanDeactivate
CanDeactivate与CanActivate不同之处在于他必须接收要保护组件的参数

import {CanDeactivate}from"@angular/router";
import {ProductComponent}from "../product/product.component";
export class UnsavedGuard implements CanDeactivate<ProductComponent>{
    canDeactivate(component:ProductComponent ){
        return window.confirm("你还没有保存，确认要离开吗")
    }
}

---

总结

虽然麻雀很小，但是不断的挖掘可以发现很多以前没有接触过的东西，而且旧的知识可以不断的运用，很棒！