Angular 4检测路由变化,可以使用router.events来监听:

支持的事件类型:

  • NavigationStart:导航开始
  • NavigationEnd:导航结束
  • NavigationCancel:取消导航
  • NavigationError:导航出错
  • RoutesRecoginzed:路由已认证

在判断事件类型需要导入对应的事件类型,如:

import { Router, NavigationStart } from '@angular/router';

监听单一事件

this.router.events
  .filter((event) => event instanceof NavigationEnd)
  .subscribe((event:NavigationEnd) => {
    //do something
});

监听多个事件

constructor(router:Router) {
  router.events.subscribe(event:Event => {
    if(event instanceof NavigationStart) {
      //
    } else if(event instanceof NavigationEnd) {
      //
    } else if(event instanceof NavigationCancel) {
      //
    } else if(event instanceof NavigationError) {
      //
    } else if(event instanceof RoutesRecognized) {
      //
    }
  });
} 运用实例参考:https://www.cnblogs.com/mary-123/p/10728614.html

angular路由事件的更多相关文章

  1. 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性

    [源码下载] 背水一战 Windows 10 (69) - 控件(控件基类): UIElement - Manipulate 手势处理, 路由事件的注册, 路由事件的冒泡, 命中测试的可见性 作者:w ...

  2. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  3. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...

  4. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  5. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  6. Angular 路由⑦要素

    cnzt       http://www.cnblogs.com/zt-blog/p/7919185.html http://www.cnblogs.com/zt-blog/p/7919185.ht ...

  7. angularjs中使用锚点,angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  8. Angular路由使用

    一. 路由:根据不同URL地址,动态让根组件挂载其他组件来实现单页面应用,相对地址 1. 项目一开始创建就会询问是否添加路由(Angular routing) 2. 有无路由区别{ 1. 多了一个ro ...

  9. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. Android项目实战之高仿网易云音乐创建项目和配置

    这一节我们来讲解创建项目:说道大家可能就会说了,创建项目还有谁不会啊,还需要讲吗,别急听我慢慢到来,肯定有你不知道的. 使用项目Android Studio创建项目我们这里就不讲解了,主要是讲解如何配 ...

  2. 发送RCS 消息摘录相关成功log

    //11-25 16:48:09.612102  2175  2726 I BugleDataModel: PendingMessagesProcessor: process from InsertN ...

  3. android studio 3.4配置Android -jni 开发基础

    首先下载配置android studio ndk 1.打开sdkManager下载CMake和LLDB 2.配置ndk 项目新建 项目建立完毕后,工程目录如下,cpp文件夹是系统自动生成的 3.自定义 ...

  4. 华为eNSP路由交换实验-生成树之RSTP

    RSTP基础配置 实验拓扑图 实验步骤 1.基本配置 根据实验编址表进行相应的基本IP配置. 2.配置RSTP基本功能. (1)把生成树模式由默认的MSTP(华为交换机默认开启)改为RSTP. [FW ...

  5. 给定数轴上的n个点,求距离最近的两个点的距离

    public class MinimumSpacing { //给定平面上的n个点,求距离最近的两个点的距离. //无从下手的话,先分解问题,分解成简单的,逐个分析,然后再合在一起考虑 //这是个2维 ...

  6. ubuntu上编译和使用easy_profiler对C++程序进行性能分析

    本文首发于个人博客https://kezunlin.me/post/91b7cf13/,欢迎阅读最新内容! tutorial to compile and use esay profiler with ...

  7. Python 从入门到进阶之路(三)

    在之前的文章我们介绍了一下 Python 中 if while for 的使用,本章我们来看一下 Python 中的变量类型. 在 Python 定义变量时的规则是 变量名 = 变量 ,Python ...

  8. 周会材料:高并发程序设计<一>

    第一章 几个概念 同步:一次方法调用须等到其返回后才能有后续 异步:一次方法调用后在另一线程执行,调用者可不必等其返回就可进行后续 并发:任务以极短的时间交替进行 并行:任务同时进行 临界区:公共资源 ...

  9. .Net Core权限认证基于Cookie的认证&授权.Scheme、Policy扩展

    在身份认证中,如果某个Action需要权限才能访问,最开始的想法就是,哪个Action需要权限才能访问,我们写个特性标注到上面即可,[TypeFilter(typeof(CustomAuthorize ...

  10. Python:多态、协议和鸭子类型

    多态 问起面向对象的三大特性,几乎每个人都能对答如流:封装.继承.多态.今天我们就要来说一说 Python 中的多态. 所谓多态:就是指一个类实例的相同方法在不同情形有不同表现形式.多态机制使具有不同 ...