路由守卫

CanActivate: 处理导航到某个路由的情况。

CanDeactivate:处理从当前路由离开的情况。

Resole:在路由激活之前获取路由数据。

1.CanActivate: 处理导航到某个路由的情况。

新建一个文件PermissionGuard.ts

import {CanActivate,

ActivatedRouteSnapshot,
RouterStateSnapshot

} from '@angular/router';

 
export class PermissionGuard   implements CanActivate{
 
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):boolean{
  
  return false;
  }
}
 
在路由配置中配置
import { PermissionGuard   } from './../PermissionGuard';
const routes: Routes = [
  {
  path:'message',
  component: MessageComponent,
  canActivate:[PermissionGuard],
  children:[
  {
  path:'messgeMenu',
  component: MessageMenuComponent,
  children:[
  {
  path:'list',
  component: MessageListComponent
  },{
  path:'',
  component: MessageDetailComponent
  }
  ]
}
]
}
]
 
在对应的Xxxmodule.ts文件中导入
import { PermissionGuard   } from './../PermissionGuard';
providers:[PermissionGuard]
 
2.CanDeactivate:处理从当前路由离开的情况
 
新建一个文件focusGuard.ts
import { CanDeactivate } from "@angular/router";
import { XxxComponent } from ''./../xxxComponent";
 
export class FocusGuard  implements CanDeactivate <XxxComponent > {
 
  canDeactivate(component: XxxComponent ){
  
    if (component.isFoucs()){
    return true;
    }else {
    return false;
    }  
  }
}
 
在路由配置中配置
import { FocusGuard  } from './../PermissionGuard';
 
canDeactivate:[FocusGuard ],
 
在对应的Xxxmodule.ts文件中导入
import { FocusGuard  } from './../focusGuard';
//其实在实例化对象
providers:[FocusGuard]
 
 3.Resole:在路由激活之前获取路由数据
 
新建一个stock-resole.service.ts文件
 
import { Injectable } from '@angular/core';
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from '@angular/router';
//导入股票数据模块
import { Stock } from './stock';
 
import { Observable } from 'rxjs/Observable';
@Injectable()
export class StockResolveService implements Resolve<Stock>{
  resolve(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Stock | Observable<Stock> | Promise<Stock>{
    console.log(new Stock(1,"IBM"));
 
    return new Stock(1,"IBM");
  }
}
 
在xxx.module.ts文件中注入
 
import { StockResolveService } from './../stock-resolve.service';
 
providers:[StockResolveService]
 

在路由中配置

import { StockResolveService } from './../stock-resolve.service';
const mineRoutes: Routes = [
{
path:'mine',
component: MineComponent,
children: [
 
{path:'mineMenu',component: MineMenuComponent},
{path:'mineList', component: MineListComponent} 
],
resolve:{
stock: StockResolveService
}
}

angular路由详解六(路由守卫)的更多相关文章

  1. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  2. Ocelot简易教程(三)之主要特性及路由详解

    作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9664977.html 上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个 ...

  3. Vue 路由详解

    Vue 路由详解 对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用,所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. V ...

  4. elasticsearch系列三:索引详解(分词器、文档管理、路由详解(集群))

    一.分词器 1. 认识分词器  1.1 Analyzer   分析器 在ES中一个Analyzer 由下面三种组件组合而成: character filter :字符过滤器,对文本进行字符过滤处理,如 ...

  5. Express的路由详解

    Express的路由详解 http://www.jb51.net/article/76203.htm

  6. [转载]Ocelot简易教程(三)之主要特性及路由详解

    上篇<Ocelot简易教程(二)之快速开始2>教大家如何快速跑起来一个ocelot实例项目,也只是简单的对Ocelot进行了配置,这篇文章会给大家详细的介绍一下Ocelot的配置信息.希望 ...

  7. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  8. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  9. iOS路由详解

    本文如题,路由详解,注定是一篇详细解释iOS路由原理及使用的文章,由于此时正在外地出差,无法详细一一写出,只能不定时的补充. 一.什么是iOS路由 路由一词来源于路由器,可以实现层级之间消息转发的功能 ...

随机推荐

  1. 权限认证 cookie VS token

    权限认证 cookie VS token 我前公司的应用都是 token 授权的,现公司都是维护一个 session 确认登录状态的.那么我在这掰扯掰扯这两种权限认证的方方面面. 工作流程 先说 co ...

  2. vue父子组件之间的通信

    利用props在子组件接受父组件传过来的值1.父组件parentComp.vue <template> <childComp :fromParentToChild="fro ...

  3. Windows系统上Redis的安装

    Redis 安装 Window 下安装 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统 ...

  4. PHP中单引号与双引号的区别

    在PHP中,字符串的定义可以使用英文单引号' ',也可以使用英文双引号" ". 一般情况下两者是通用的.但双引号内部变量会解析,单引号则不解析. PHP允许我们在双引号串中直接包含 ...

  5. 静态编译程序 依赖于 Qt 和 Opencv 静态库 会出现 jpeg jpg 图像格式保存崩溃的情况,这是什么原因?

    双方依赖的 jpeg 静态库源码版本冲突,重新静态编译库,都采用一致版本即可.

  6. 【Learning】最小点覆盖(二分图匹配) 与Konig定理证明

    (附一道例题) Time Limit: 1000 ms   Memory Limit: 128 MB Description 最小点覆盖是指在二分图中,用最小的点集覆盖所有的边.当然,一个二分图的最小 ...

  7. Kotlin——基础的函数/方法详解

    对于Kotlin中的函数来说,和JavaScript或者Lua这些语言很像,它有着这些语言的特性.但是也与这些语言就着许多不同之处.或许你更了解Java语言,然而对于Java语言来说,它不是不是闭包这 ...

  8. 谈一谈Java中的Error和Exception

    Error和Exception的联系 继承结构:Error和Exception都是继承于Throwable,RuntimeException继承自Exception. Error和RuntimeExc ...

  9. 远程控制你的智能电视,按键|输入|安装App等都已实现,已开源!

    一.序 Hi,大家好,我是承香墨影! 智能电视或者智能盒子,不知道大家了解多少? 这两年各大厂商生产的电视设备,基本上都是搭载的 Android 系统.既然电视本身就是 Android 系统的,我们也 ...

  10. java 集合框架(二)Iterable接口

    Iterable接口是java 集合框架的顶级接口,实现此接口使集合对象可以通过迭代器遍历自身元素,我们可以看下它的成员方法 修饰符和返回值 方法名 描述 Iterator<T> iter ...