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. buildroot使用

    buildroot是一套自动化构建工具,比yocto简单. 项目地址:http://www.buildroot.org/ 培训资料地址:http://free-electrons.com/ 附带lin ...

  2. win7旗舰版怎么降级到专业版

    一.操作准备及注意事项 1.UltraISO光盘制作工具9.5 2.备份C盘及桌面文件 二.win7旗舰版改成专业版的步骤 1.当前系统为Win7 SP1 64位旗舰版: 2.按Win+R打开运行,输 ...

  3. BZOJ5020: [THUWC 2017]在美妙的数学王国中畅游(LCT,泰勒展开,二项式定理)

    Description 数字和数学规律主宰着这个世界.   机器的运转,   生命的消长,   宇宙的进程,   这些神秘而又美妙的过程无不可以用数学的语言展现出来.   这印证了一句古老的名言:   ...

  4. 在安卓(手机)上运行 Ubuntu (Linux)

    在安卓(手机)上运行 Ubuntu (Linux) 由于x86 和 arm 是跨平台的,所使用的编译器自然也不同.如果要在电脑上编译安卓手机上的程序,则需在电脑端建立ARM交叉编译环境,这个过程是在耗 ...

  5. Writing Images to the Excel Sheet using PHPExcel--转载

    原文地址:http://www.walkswithme.net/writing-images-to-the-excel-sheet-using-phpexcel Writing images to t ...

  6. React-怎么写好组件-简单

    数据层:用来决定按钮的个数以及按钮是否选择. 表现层(展示层):按钮使用现有的ui 组件. 逻辑层(业务层):按钮事件等逻辑处理.

  7. 【CS Round #43 A】Expected Dice

    [链接]https://csacademy.com/contest/round-43/task/expected-dice/ [题意] 大水题 [题解] 把36种可能的结果都存下来. 然后把重复出现的 ...

  8. SQL server 错误代码对比表

    0  操作成功完毕.    1  功能错误.    2  系统找不到指定的文件.    3  系统找不到指定的路径.    4  系统无法打开文件.    5  拒绝訪问.    6  句柄无效.   ...

  9. JAVA开发类似冒险岛的游戏Part1

    JAVA开发类似冒险岛的游戏Part1 一.总结 二.JAVA开发类似冒险岛的游戏Part1 初学嘛) ,不过总的来说这个程序还是很有意思的.这里我重新再整理了一下,希望能帮助到其他想要开发类似程序的 ...

  10. arduino串口输出问题