[Angular] Subscribing to router events
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的更多相关文章
- [Angular2 Router] Setup page title with Router events
Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...
- Angular.js之Router学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- [Angular 2] Handling Click Events with Subjects
While Angular 2 usually uses event handlers to manage events and RxJS typically uses Observable.from ...
- http://angular.github.io/router/
Angular New Router Guide Configuring the Router- This guide shows the many ways to map URLs to compo ...
- angular 的ui.router 定义不同的state 对应相同的url
Angular UI Router: Different states with same URL? The landing page of my app has two states: home-p ...
- [Angular] Auxiliary named router outlets
Define a auxilliary router: export const ROUTES: Routes = [ { path: 'folder/:name', component: MailF ...
- [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 ...
- [Angular 2] Child Router
Benefit to use child router is Angualr 2 then can lazy load the component on demand. Define a child ...
- [Angular] Subscribing to the valueChanges Observable
For example we have built a form: form = this.fb.group({ store: this.fb.group({ branch: '', code: '' ...
随机推荐
- BZOJ5137: [Usaco2017 Dec]Standing Out from the Herd(广义后缀自动机,Parent树)
Description Just like humans, cows often appreciate feeling they are unique in some way. Since Farme ...
- Python Jsonpath模块用法
在使用Python做自动化校验的时候,经常会从Json数据中取值,所以会用到Jsonpath模块,这里做个简单的总结 1.关于jsonpath用来解析多层嵌套的json数据;JsonPath 是一种信 ...
- method initializationerror not found:JUnit4单元測试报错问题
今天使用JUnit 4进行单元測试时,測试程序一直执行不起来,报method initializationerror not found错误.例如以下: 网上说版本 ...
- Linux下常用的中文输入法平台有IBus、fcitx和scim
Linux下常用的中文输入法平台有IBus.fcitx和scim.scim现在维护滞后,不推荐使用. IBus ("Intelligent Input Bus") 是一个 输入法框 ...
- Solr 读数据流程
Solr 读数据流程: 1.用户提供搜索关键词,也就是搜索语句,需要经过分词器处理以及语言处理. 2.对处理之后的关键词,搜索索引找出对应Document 即记录. 3.用户根据需要从找到的Docum ...
- h5背景
1.背景属性复习: background-image background-color background-repeat background-position background-attachm ...
- nginx+tomcat 架构 HttpServletRequest.getScheme()获取正确的协议
http://blog.csdn.net/ofofw/article/details/46791447
- Android Material风格的应用(二)--RecyclerView
添加RecyclerView Android Material风格的应用(一)--AppBar TabLayoutAndroid Material风格的应用(二)--RecyclerViewAndro ...
- Transact-SQL语法速查手册
第1章 Transact-SQL基础 1.1 标识符 一.常规标识符 1. 命名规则: l 第一个字母必须是Unicode2.0标准定义的字母.下划线.at符号(@)和数字符号(#): l 后续字符可 ...
- OpenNI2获取华硕XtionProLive深度图和彩色图并用OpenCV显示
使用OpenNI2打开XtionProLive时有个问题,彩色图分辨率不管怎样设置始终是320*240,深度图倒是能够设成640*480,而OpenNI1.x是能够获取640*480的彩色图的. 彩色 ...