我正在使用angular5应用程序，我也面临着同样的问题。当我翻阅Angular文档时，它们提供了处理路由器事件的最佳解决方案。查看以下文档。

Angular中的路由器事件 在angar5中路由事件 但对于特定的情况，我们需要NavigationEnd事件 导航结束事件

表示导航成功结束时触发的事件

如何使用这个?

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRouteSnapshot, NavigationEnd } from '@angular/router';
@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
    constructor(private router: Router) { }
    ngOnInit(): void {
        //calls this method when navigation ends
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                //calls this stuff when navigation ends
                console.log("Event generated");
            }
        });
    }
}

什么时候用这个?

在我的情况下，我的应用程序共享公共仪表板的所有用户，如用户，管理员，但我需要显示和隐藏一些导航栏选项为每个用户类型。

这就是为什么每当url更改时，我需要调用返回登录用户信息的服务方法，根据响应，我将进行进一步的操作。

以以下方式捕获路由更改事件…

import { Component, OnInit, Output, ViewChild } from "@angular/core";
import { Router, NavigationStart, NavigationEnd, Event as NavigationEvent } from '@angular/router';

@Component({
    selector: "my-app",
    templateUrl: "app/app.component.html",
    styleUrls: ["app/app.component.css"]
})
export class AppComponent {

    constructor(private cacheComponentObj: CacheComponent,
        private router: Router) {

        /*  Route event types
            NavigationEnd
            NavigationCancel
            NavigationError
            RoutesRecognized
        */
        router.events.forEach((event: NavigationEvent) => {

            //Before Navigation
            if (event instanceof NavigationStart) {
                switch (event.url) {
                case "/app/home":
                {
                    //Do Work
                    break;
                }
                case "/app/About":
                {
                    //Do Work
                    break;
                }
                }
            }

            //After Navigation
            if (event instanceof NavigationEnd) {
                switch (event.url) {
                case "/app/home":
                {
                    //Do Work
                    break;
                }
                case "/app/About":
                {
                    //Do Work
                    break;
                }
                }
            }
        });
    }
}

可以使用以下方法检测路由变化:

import {Router, ActivatedRoute} from '@angular/ Router '; 构造函数(私有路由:ActivatedRoute) {} This.router.events.subscribe ((event) => { 如果(事件){ / /做某事 ｝ })；

@Ludohen的回答很好，但如果你不想使用instanceof，请使用下面的方法

this.router.events.subscribe(event => {
  if(event.constructor.name === "NavigationStart") {
    // do something...
  }
});

通过这种方式，您可以检查当前事件名称作为字符串，如果事件发生，您可以执行您计划的函数要执行的操作。

在angular 6和RxJS6中:

import { filter, debounceTime } from 'rxjs/operators';

 this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      debounceTime(40000)
    ).subscribe(
      x => {
      console.log('val',x);
      this.router.navigate(['/']); /*Redirect to Home*/
}
)

这里的答案是正确的路由器弃用。对于最新版本的路由器:

this.router.changes.forEach(() => {
    // Do whatever in here
});

or

this.router.changes.subscribe(() => {
     // Do whatever in here
});

要了解两者之间的区别，请查看这个SO问题。

Edit

对于最新的您必须做:

this.router.events.subscribe(event: Event => {
    // Handle route change
});