2019-1-11angular5路由

 Angular 4监听路由变化,可以使用router.events来监听:

支持的事件类型:

NavigationStart:导航开始

NavigationEnd:导航结束

NavigationCancel:取消导航

NavigationError:导航出错

RoutesRecoginzed:路由已认证

在判断事件类型需要导入对应的事件类型,如:

import { Router, NavigationStart } from '@angular/router';

监听单一事件

this.router.events

.filter((event) => event instanceof NavigationEnd)

.subscribe((event:NavigationEnd) => {

//do something

});

监听多个事件

constructor(router:Router) {

router.events.subscribe(event:Event => {

if(event instanceof NavigationStart) {

//

} else if(event instanceof NavigationEnd) {

//

} else if(event instanceof NavigationCancel) {

//

} else if(event instanceof NavigationError) {

//

} else if(event instanceof RoutesRecognized) {

//

}

});

}

版权声明:著作权归作者所有。

相关推荐

Angular 5获取当前的路由url及参数

获取当前加载组件的路由信息可以使用ActivatedRoute。ActivatedRoute接口如下:interface ActivatedRoute {    snapshot: ActivatedRouteSnapshot   url: Observable<UrlSegment[]> &nb

Angular4 监听路由URL的变化

Angular 4检测路由变化,可以使用router.events来监听:支持的事件类型:NavigationStart:导航开始NavigationEnd:导航结束NavigationCancel:取消导航NavigationError:导航出错RoutesRecoginzed:路由已认证在判断事件类型需要导入对应的事件类型,如:import { Router,&n

Angular 5配置使用service-worker

Angular 5实现了一个适用于Angular应用的Service Worker,Angular CLI 1.6也添加了对service worker的支持。使用Angular CLI对应用添加service worker的支持分两种情况:新项目应用中添加service worker在已有项目中添加service&n

Angular 5:HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性:对响应的body做类型检查默认返回的是JSON对象,不再需要使用json()显式解析返回的数据支持拦截器支持进度事件请求后验证和基于刷新的测试框架安装HttpClientModuleHttpClient属于@angular/common/http包的模块HttpCl

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更