背景 |
最近在前端项目中用到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("你还没有保存,确认要离开吗")
}
}
总结 |
虽然麻雀很小,但是不断的挖掘可以发现很多以前没有接触过的东西,而且旧的知识可以不断的运用,很棒!