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. https://github.com/ 英文库

    https://github.com/ https://github.com/sachinchoolur

  2. 63.当当网txt数据按行切割与合并

    获取文件有多少行 //获取文件有多少行 int getN(char *path) { FILE *pf = fopen(path, "r"); if (pf==NULL) { ; ...

  3. go语言函数作为参数传递

    go语言函数作为参数传递,目前给我的感觉几乎和C/C++一致.非常的灵活. import "fmt" import "time" func goFunc1(f ...

  4. 斜率优化dp练习

    1.HDU3507 裸题,有助于理解斜率优化的精髓. dp[i]=min(dp[j]+m+(sum[i]-sum[j])2) 很显然不是单调队列. 根据斜率优化的的定义,就是先设两个决策j,k 什么时 ...

  5. 六、Docker+Gitlab

    原文:六.Docker+Gitlab (1)下载镜像: docker pull gitlab/gitlab-ce (2)运行镜像: GITLAB_HOME=`pwd`/data/gitlab dock ...

  6. Android JNI用于驱动測试

    硬件平台:S3C6410 操作系统:Ubuntu.windows 板子系统:Android 开发工具:jdk.ndk,eclipse 本次測试从linux内核模块编译開始.以S3C6410的pwm驱动 ...

  7. js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化

    js进阶 14-7 jquery的ajax部分为什么需要对表单进行序列化 一.总结 一句话总结:如果用ajax传递表单的数据,如果不进行表单的序列化,要一个参数一个参数的写,太麻烦,序列化的话,一句代 ...

  8. amazeui学习笔记二(进阶开发1)--项目结构structure

    amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...

  9. 11G、12C Data Guard Physical Standby Switchover转换参考手册

    Switchover转换   Step 1: switchover 切换先前检查 (1)确保主备两端log_archive_config和db_unique_name参数都已经正确设置. 需要注意的是 ...

  10. Java Web学习总结(18)——JSP标签

    一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...