Angular4 监听路由URL的变化

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) {
      //
    }
  });
}

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

相关推荐

RecyclerView添加点击事件监听器

实现RecyclerView.OnItemTouchListener的项目触摸监听器:import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.GestureDetector; import android.view.M

Angular 4选择组件模板DOM元素(DOM操作)的方式

Angular提供了多种方式让我们获取页面的元素。主要分为两种:基于Decorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren使用ElementRef以及querySelectorDecorator:@ViewChild,@ViewChildren,@ContentChild,@ContentChildren@ViewChil

Linux shell命令监控文件的变化

1、tail:监控文件的实时更新tail -f logfile.log 2、watch:定时执行命令并输出命令内容,对于有改变的输出会以高亮的方式显示watch -n 10 -d ls -l /var/ -n:设置每隔多少秒执行指定的命令-d:设置执行的命令示例里是每10秒执行ls命令。

配置Nginx解决Angular 4刷新路由重新加载报404错误

Angular重新加载页面会报404,原因可分为三种:1、路由不存在2、Angular使用html5模式的路由,需要把所有路由的请求映射到index.html配置Nginx如下:location / {     root /var/html;     try_files $uri $uri/ /index.html =404;   } 其

Angular 4:集成Angular Material2

Angular Material目的是按照Material Design的规范,使用Angular和TypeScript构建一个高质量的UI组件集。Angular 4已有的项目可以按照下面的步骤集成使用Angular Material2。安装Angular Material以及Angular CDKnpm install&nbs

Angular4使用Rxjs5共享Http请求返回的结果数据

在使用Angular开发的单页面应用里,有时需要处理这种场景:使用http请求某个数据,数据请求成功后需要把数据更新到多个组件里。也就是说,有多个observer(观察者)对http请求数据返回的Observable订阅。getDta() {     return this.http.get('/dataUrl').map(res&nbs