zoukankan      html  css  js  c++  java
  • 路由守卫

    路由守卫

    CanActivate  | 处理导航到某路由的情况—阻止或允许用户进入组件

    CanDeactivate  | 处理从当前路由离开的情况—用户离开时

    Resolve  | 在路由激活之前获取路由数据—在组件绑定的属性还没有被赋值时会报错,这个守卫就是解决这个问题的

    CanActivate

    1.需要新建一个 XX.guard.ts 文件

    2.在这个.ts 文件里导入 CanActivate 模块 ...

    长这样:

    canActivate(){}  这个方法 return true 用户就能正常加载这个路由组件,返回false 就被拦住了

    3.在app.module.ts里导入这个模块

    在providers:[] 注入模块

    4.在app-routing.module.ts 导入这个模块

    在你需要使用路由守卫的地方这样写:

    CanDeactivate

    1.需要新建一个 XX.guard.ts 文件

    导入CanDeactivate 模块和要保护的模块

    这个文件是这样写的:

    箭头所指的就是需要保护的模块,canDeactivate 这个函数返回true表示同意离开,返回false表示不同意离开

    2.在app.module.ts中导入刚刚创建的这个模块

    注入到providers

    3.在app-routing.module.ts 里导入创建的这个模块

    在要保护的模块的路由的地方这样配置:

    Resolve 

    在进到组件之前,把这个组件需要的数据都获取到,当组件加载进来时直接就给页面绑定的数据赋值了

     1. 新建 stock.resolve.ts , 注意import 导入模块的路径,跟着注释走

    2. 要使用这个守卫的模块的ts文件

    导入组件

    实例化组件

     

    再写一个类(第二个导出的类)这个类接收两个参数(自定义参数的多少和类型)

    声明一个 stock,指定类型为Stock;

    在ngOnInit()函数里获取路由守卫获取到的值,并且赋值给本地变量stock

     

    3.app.module.ts 里导入这个守卫

     

    并且注入到providers里

     

    在使用这个守卫的路由app.routing.module.ts里这样配置

     

    4.根据传的值来决定守卫的动作

  • 相关阅读:
    Navicat 回复 psc 文件 Mysql
    android SDK 更新问题完美解决 http://dl-ssl.google.com refused
    利用android来赚钱
    苹果应用 Windows 申请 普通证书 和Push 证书 Hbuilder 个推(2)
    苹果应用 Windows 申请 普通证书 和Push 证书 Hbuilder 个推
    Java version 32转64位
    浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式
    JavaScript之深浅拷贝
    关于一道JS面试题的思考
    EasyUI-Tooltip(提示框)学习
  • 原文地址:https://www.cnblogs.com/chefweb/p/8400690.html
Copyright © 2011-2022 走看看