• 路由守卫


    路由守卫

    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.根据传的值来决定守卫的动作

  • 相关阅读:
    记一次在Windows10桌面环境搭建Jekins的吐血经历
    Windows系统下的输入法选择
    Linux后台进程启停脚本模板
    crontab采坑总结
    编程软件仓库集合
    CentOS7安装Chrome及驱动
    不错的“淘宝”网站
    软件下载网站集合
    在线API集合
    在线教程集合
  • 原文地址:https://www.cnblogs.com/chefweb/p/8400690.html
Copyright © 2020-2023  润新知