[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: '' ...
随机推荐
- 8.Maven之(八)约定优于配置
转自:“https://blog.csdn.net/qq_25460531/article/details/79423961” maven的配置文件看似很复杂,其实只需要根据项目的实际背景,设置个别的 ...
- Scala中的“=>”和“<-”
“=>”符号大概可以看做是创建函数实例的语法糖,例如 args.foreach(arg => println(arg)) 大概可以看做 args.foreach(Function(arg) ...
- Spring学习总结(11)——Spring JMS MessageConverter介绍
消息转换器MessageConverter MessageConverter的作用主要有两方面,一方面它可以把我们的非标准化Message对象转换成我们的目标Message对象,这主要是用在发送消息的 ...
- Spring学习总结(9)——Spring AOP总结
spring IOC和AOP是Spring框架的两大核心基石,本文将对Spring AOP做一个系统的总结. 什么是AOP AOP(Aspect-Oriented Programming,面向切面编程 ...
- ListView Item 点击展开隐藏问题
public class ListAdapter extends BaseAdapter { private Context mContext; private View mLastV ...
- 7,NULL与nullptr对比
#include <iostream> #include <array> using namespace std; void show(int num) { cout < ...
- JavaScript 倒计时器,闹钟功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- web前端背景介绍
Internet:是一个全球性的计算机互联网络,中文名称“因特网”.“国际互联网”.“网际网”等等: Internet提供的服务:http.ftp.Telnet.email.www.bbs等等: 基本 ...
- Python 极简教程(五)输入输出
输入函数,用于接收键盘输入.主要用于在学习和练习过程中,增加练习的乐趣.让我们的程序相对完整和具备简单的交互能力. 输出函数,将代码运行结果打印在控制台上,同样也能让我们观察程序运行的结果.也是为了增 ...
- 【习题 6-2 UVA - 712】S-Trees
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] dfs模拟一下就好. 先预处理一个dfs. 搞出来x叶子节点它的值是什么 [代码] /* 1.Shoud it use long l ...