In our root component, one thing we can do is subscribe to Router events, and do something related to router events. So how can we get router event?

export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.events
.subscribe(events => console.log(events))
}
}

To events we log out from 'this.router.events' is actually the same as we enable router tracing.

If you only interested in one event 'NavigationEnd', we can use RxJS filter:

import 'rxjs/add/opreator/fitler';

export class AppComponent implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
this.router.events
.filter(event => event instanceof NavigationEnd)
.subscribe(events => console.log(events))
}
}

Here we use 'instanceof', this is because which event is a class. So we can use instanceof to filter according to the class.

[Angular] Subscribing to router events的更多相关文章

  1. [Angular2 Router] Setup page title with Router events

    Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...

  2. Angular.js之Router学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. [Angular 2] Handling Click Events with Subjects

    While Angular 2 usually uses event handlers to manage events and RxJS typically uses Observable.from ...

  4. http://angular.github.io/router/

    Angular New Router Guide Configuring the Router- This guide shows the many ways to map URLs to compo ...

  5. angular 的ui.router 定义不同的state 对应相同的url

    Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...

  6. [Angular] Auxiliary named router outlets

    Define a auxilliary router: export const ROUTES: Routes = [ { path: 'folder/:name', component: MailF ...

  7. [Angular Directive] 3. Handle Events with Angular 2 Directives

    A @Directive can also listen to events on their host element using @HostListener. This allows you to ...

  8. [Angular 2] Child Router

    Benefit to use child router is Angualr 2 then can lazy load the component on demand. Define a child ...

  9. [Angular] Subscribing to the valueChanges Observable

    For example we have built a form: form = this.fb.group({ store: this.fb.group({ branch: '', code: '' ...

随机推荐

  1. Elasticsearch之插件扩展

    Elasticsearch之插件介绍及安装 Elasticsearch之head插件安装之后的浏览详解 Elasticsearch之kopf插件安装之后的浏览详解 Elasticsearch-2.4. ...

  2. [ Eclipse ] [ Problem ] Eclipse 無法開啟問題

    因為 Eclipse 在設定環境的過程掛掉太多次,擷取一些網路上優秀的文章當作備份 http://www.ewdna.com/2013/12/Eclipse-Loading-Workbench.htm ...

  3. Vue前后端分离常用JS函数点(一)

    1.筛选过滤:array.filter(function(val){});  会把array中符合规则的数组元素按array里面的元素顺序保留下来. // 官方解释:按返回true或者false,把不 ...

  4. 解决sublime text3配置Python3编译环境:运行代码时提示“NO Build System”

    只需要在路径中把单杠换成双杠,重启sublime即可.

  5. “ping”命令的原理就是向对方主机发送UDP数据包,HTTP在每次请求结束后都会主动释放连接,因此HTTP连接是一种“短连接”

    Socket  是一套建立在TCP/IP协议上的接口不是一个协议 应用层:  HTTP  FTP  SMTP  Web 传输层:  在两个应用程序之间提供了逻辑而不是物理的通信(TCP  UDP) T ...

  6. Express框架是什么

    Express框架是什么 一.总结 1.express框架:基于node.js的web应用框架,可快速搭建一个完整功能的网站,丰富的HTTP工具以及来自Connect框架的中间件随取随用. 二.Exp ...

  7. 6. MongoDB

    https://www.mongodb.com/ https://pan.baidu.com/s/1mhPejwO#list/path=%2F 安装MongoDB# 安装MongoDB http:// ...

  8. vue-cli打包项目后,可以修改配置文件

    问题: 前端需要修改后台服务器地址url,写好的配置文件会在npm run build 后压缩在一起,传到运行的前端服务器上后,需要到前端打包的源码,找到url地址进行修改.如果不在打包的源码修改,则 ...

  9. PythonServer

    服务器模型 硬件服务器 主机.集群 厂商:IBM.HP.联想.浪潮 软件服务器:编写的服务端应用程序,在硬件服务器上运行,一般依托于操作系统,给用户提供一套完整的服务 httpserver:处理htt ...

  10. R语言-回归

    定义: 回归是统计学的核心,它其实是一个广义的概念,通常指那些用一个或多个预测变量来预测响应变量.既:从一堆数据中获取最优模型参数 1.线性回归 1.1简单线性回归 案例:女性预测身高和体重的关系 结 ...