下面的方法可以帮你解决棘手的问题。

// in constructor of your app.ts with router and auth services injected
router.subscribe(path => {
if (!authService.isAuthorised(path)) //whatever your auth service needs
router.navigate(['/Login']);
});

不幸的是，这在路由过程中比我想要的晚些时候重定向。在重定向之前调用原始目标组件的onActivate()。

你可以在目标组件上使用@CanActivate装饰器，但这是a)不集中的，b)不能从注入的服务中受益。

如果有人能提出一种更好的方法，在路由提交之前对其进行集中授权，那就太好了。我相信一定有更好的办法。

这是我当前的代码(我如何改变它来监听路由变化?):

import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
import {ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
import {Location, LocationStrategy, HashLocationStrategy} from 'angular2/router';


import { Todo } from './components/todo/todo';
import { About } from './components/about/about';


@Component({
selector: 'app'
})


@View({
template: `
<div class="container">
<nav>
<ul>
<li><a [router-link]="['/Home']">Todo</a></li>
<li><a [router-link]="['/About']">About</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
</div>
`,
directives: [RouterOutlet, RouterLink]
})


@RouteConfig([
{ path: '/', redirectTo: '/home' },
{ path: '/home', component: Todo, as: 'Home' },
{ path: '/about', component: About, as: 'About' }
])


class AppComponent {
constructor(location: Location){
location.go('/');
}
}
bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'})]);

class MyClass {
constructor(private router: Router) {
router.subscribe((val) => /*whatever*/)
}
}

编辑(自rc.1)

class MyClass {
constructor(private router: Router) {
router.changes.subscribe((val) => /*whatever*/)
}
}

编辑2(从2.0.0开始)

参见:路由器。活动文档

class MyClass {
constructor(private router: Router) {
router.events.subscribe((val) => {
// see also
console.log(val instanceof NavigationEnd)
});
}
}

这里的答案是正确的router-deprecated。对于router的最新版本:

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

或

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

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

编辑

对于最新的您必须做:

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

RxJS 6

router.events.pipe(filter(event => event instanceof NavigationStart))

感谢Peilonrayz(见下面的评论)

新路由器>= RC.3

import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';


constructor(router:Router) {
router.events.forEach((event) => {
if(event instanceof NavigationStart) {
}
// NavigationEnd
// NavigationCancel
// NavigationError
// RoutesRecognized
});
}

你也可以通过给定的事件进行过滤:

import 'rxjs/add/operator/filter';


constructor(router:Router) {
router.events
.filter(event => event instanceof NavigationStart)
.subscribe((event:NavigationStart) => {
// You only receive NavigationStart events
});
}

使用# EYZ0运营商来获取以前和当前事件也是一个不错的想法。# EYZ2

import 'rxjs/add/operator/pairwise';
import { Router } from '@angular/router';


export class AppComponent {
constructor(private router: Router) {
this.router.events.pairwise().subscribe((event) => {
console.log(event);
});
};
}

路由器3.0.0-beta。2应该是

this.router.events.subscribe(path => {
console.log('path = ', path);
});

我从RC 5开始这样做

this.router.events
.map( event => event instanceof NavigationStart )
.subscribe( () => {
// TODO
} );

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

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

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

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

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

角4。X及以上:

这可以通过使用ActivatedRoute类的url属性实现，如下所示:

this.activatedRoute.url.subscribe(url =>{
console.log(url);
});

<强>注意: 您需要从angular/router包

import { ActivatedRoute } from '@angular/router`

而且

constructor(private activatedRoute : ActivatedRoute){  }

在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*/
}
)

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

• Angular中的路由器事件 李# EYZ0 < / p > < / >

• 但具体来说，对于问题中的情况，我们需要NavigationEnd事件

  # EYZ0 < / p >

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

如何使用这个?

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更改时，我需要调用返回登录用户信息的服务方法，根据响应，我将进行进一步的操作。

7角，如果你想subscribe到router

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


import { filter } from 'rxjs/operators';


constructor(
private router: Router
) {
router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
console.log(event.url);
});
}

以上大多数解决方案是正确的，但我面临的问题是这个发射多次'导航发射'事件。当我改变任何路由时，此事件被触发。所以hear是Angular 6的完整解决方案。

import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';


export class FooComponent implements OnInit, OnDestroy {
private _routerSub = Subscription.EMPTY;
constructor(private router: Router){}


ngOnInit(){
this._routerSub = this.router.events
.filter(event => event instanceof NavigationEnd)
.subscribe((value) => {
//do something with the value
});
}


ngOnDestroy(){
this._routerSub.unsubscribe();
}
}

对于7角，应该这样写:

# EYZ0

具体示例如下:

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';


@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {


constructor(private router: Router) {


this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationStart) {
// Show loading indicator
}


if (event instanceof NavigationEnd) {
// Hide loading indicator
}


if (event instanceof NavigationError) {
// Hide loading indicator


// Present error to user
console.log(event.error);
}
});


}
}

只需在AppRoutingModule上进行更改

@NgModule({
imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
exports: [RouterModule]
})

在组件中，你可能想尝试这样做:

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


constructor(private router: Router) {
router.events.subscribe(
(event) => {
if (event instanceof NavigationStart)
// start loading pages
if (event instanceof NavigationEnd) {
// end of loading paegs
}
});
}

# EYZ0。

  baseroute: boolean;
constructor(
private router: Router,
) {
router.events.subscribe((val: any) => {
if (val.url == "/") {
this.baseroute = true;
} else {
this.baseroute = false;
}
});
}

简单的答案 角8。* < / p >

constructor(private route:ActivatedRoute) {
console.log(route);
}

位置的作品……

import {Component, OnInit} from '@angular/core';
import {Location} from '@angular/common';


@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})


export class AppComponent implements OnInit {


constructor(private location: Location) {
this.location.onUrlChange(x => this.urlChange(x));
}


ngOnInit(): void {}


urlChange(x) {
console.log(x);
}
}

在Angular 8中，你应该像this.router.events.subscribe((event: Event) => {})这样做

例子:

import { Component } from '@angular/core';
import { Router, Event } from '@angular/router';
import { NavigationStart, NavigationError, NavigationEnd } from '@angular/router';


@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
})
export class AppComponent {


constructor(private router: Router) {
//Router subscriber
this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationStart) {
//do something on start activity
}


if (event instanceof NavigationError) {
// Handle error
console.error(event.error);
}


if (event instanceof NavigationEnd) {
//do something on end activity
}
});
}
}

我会这样写:

ngOnInit() {
this.routed = this.router.events.map( event => event instanceof NavigationStart )
.subscribe(() => {
} );
}


ngOnDestroy() {
this.routed.unsubscribe();
}

在Angular 10中，你可以像下面这样做……

    import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
    

@Component({
selector: 'app-my-class',
templateUrl: './my-class.component.html',
styleUrls: ['./my-class.component.scss']
})
export class MyClassComponent implements OnInit {
constructor(private router: Router) {}
    

ngOnInit(): void {
this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((event: NavigationEnd) => {
// code goes here...
});
}
}

更清晰的方法是继承RouteAware并实现onNavigationEnd()方法。

它是名为@bespunky / angular-zen的库的一部分。

1. NPM install @bespunky/angular-zen

2. 使你的AppComponent扩展RouteAware，并添加一个onNavigationEnd()方法。

import { Component     } from '@angular/core';
import { NavigationEnd } from '@angular/router';
import { RouteAware    } from '@bespunky/angular-zen/router-x';


@Component({
selector   : 'app-root',
templateUrl: './app.component.html',
styleUrls  : ['./app.component.css']
})
export class AppComponent extends RouteAware
{
protected onNavigationEnd(event: NavigationEnd): void
{
// Handle authentication...
}
}

RouteAware还有其他好处，比如:
. RouteAware ✨任何路由器事件都可以有一个处理程序方法(Angular支持的路由器事件)。
✨使用this.router访问路由器
✨使用this.route访问激活路由
✨使用this.componentBus访问RouterOutletComponentBus服务

我是这么说的:

class ClassName {
constructor(private router: Router) {
router.events.subscribe((value) => {
// see this
console.log(value instanceof NavigationEnd)
});
}
}

为那些使用Angular9+的人更新了答案，通过使用@angular/router提供的路由API和侦听路由变化

import { Component } from '@angular/core';
import { Router,NavigationEnd  } from '@angular/router';


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

name = 'Get Current Url Route Demo';
currentRoute: string;
routeSubscription: subscription;
    

constructor(private router: Router){
console.log(router.url);
        

this.routeSubscription = router.events.filter(event => event instanceof NavigationEnd)
.subscribe(event =>
{
this.currentRoute = event.url;
console.log(event);
});
}
}

如果你试图访问当前路由，同时监听路由变化:

router.events.pipe(filter(r=>r instanceof NavigationEnd)).subscribe(r=>{
console.log((r as NavigationEnd).url);
});

如果你只是想检查路由/查询参数的变化，如localhost: 4200 /用户/ 1 ?编辑= 1到localhost: 4200 /用户/ 2 ?编辑= 0，你可以使用params observable，如下所示。

import { ActivatedRoute, Params } from '@angular/router';
export class SomeClass implements OnInit {


paramFromRoute;


constructor(private route: ActivatedRoute) { }


ngOnInit() {
this.paramFromRoute = this.route.snapshot.params['paramName']; // this one is required for getting it first time


this.route.params.subscribe((params:Params)=>{
this.paramFromRoute =  params['paramName'] // whenever route is changed, this function will triggered.
});
// for queryParams you can subscribe to this.route.queryParams
}
}

在Angular 7中，我用下面的函数解决了在特定页面上启用和禁用导航栏的问题。

首先，您应该导入NavigationEnd

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

navbar.component.ts

public isNavbar=false;
ngAfterViewInit() {


// nabar enable / disable function
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
if(event.url.includes('dashboard')){
this.isNavbar=true;
}else{
this.isNavbar=false;
}
}
});
}

navbar.component.html

<mat-toolbar *ngIf="isNavbar" class="mat-elevation-z1 nav-tool-bar">
<button mat-button routerLink="/dashboard" routerLinkActive="active-list-item"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="nav-bar-icon svg-inline--fa fa-paper-plane fa-w-16"><path fill="currentColor" d="M464 4.3L16 262.7C-7 276-4.7 309.9 19.8 320L160 378v102c0 30.2 37.8 43.3 56.7 20.3l60.7-73.8 126.4 52.2c19.1 7.9 40.7-4.2 43.8-24.7l64-417.1C515.7 10.2 487-9 464 4.3zM192 480v-88.8l54.5 22.5L192 480zm224-30.9l-206.2-85.2 199.5-235.8c4.8-5.6-2.9-13.2-8.5-8.4L145.5 337.3 32 290.5 480 32l-64 417.1z" class=""></path></svg>
Campagnes</button>
<button mat-button routerLink="fake" routerLinkActive="active-list-item"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="box-open" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 608 512" class="nav-bar-icon svg-inline--fa fa-box-open fa-w-19"><path fill="currentColor" d="M606.4 143.8L557.5 41c-2.7-5.6-8.1-9-13.9-9C543 32 304 64 304 64S65 32 64.4 32c-5.8 0-11.2 3.5-13.9 9L1.6 143.8c-4.4 9.2.3 20.2 9.6 23l49.5 14.9V393c0 14.7 9.5 27.5 23 31l205.4 54.1c13 3.4 23.7 1.5 29.5 0L524.2 424c13.5-3.6 23-16.4 23-31V181.7l49.5-14.9c9.4-2.8 14-13.8 9.7-23zM73 65.3l180.9 24.3-57.1 99.8-159.9-48.1 36.1-76zm18.2 125.6C208.3 226.1 200.5 224 203.6 224c5.4 0 10.5-2.9 13.3-7.9l71.9-125.5V445L91.2 393V190.9zM516.8 393l-197.6 52V90.5L391.1 216c2.9 5 8 7.9 13.3 7.9 3.1 0-5 2.1 112.4-33.1V393zM411.3 189.3l-57.1-99.8L535 65.3l36.1 76-159.8 48z" class=""></path></svg>
Ressources</button>
<button mat-button routerLink="fake" routerLinkActive="active-list-item"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="life-ring" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="nav-bar-icon svg-inline--fa fa-life-ring fa-w-16"><path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm168.766 113.176l-62.885 62.885a128.711 128.711 0 0 0-33.941-33.941l62.885-62.885a217.323 217.323 0 0 1 33.941 33.941zM256 352c-52.935 0-96-43.065-96-96s43.065-96 96-96 96 43.065 96 96-43.065 96-96 96zM363.952 68.853l-66.14 66.14c-26.99-9.325-56.618-9.33-83.624 0l-66.139-66.14c66.716-38.524 149.23-38.499 215.903 0zM121.176 87.234l62.885 62.885a128.711 128.711 0 0 0-33.941 33.941l-62.885-62.885a217.323 217.323 0 0 1 33.941-33.941zm-52.323 60.814l66.139 66.14c-9.325 26.99-9.33 56.618 0 83.624l-66.139 66.14c-38.523-66.715-38.5-149.229 0-215.904zm18.381 242.776l62.885-62.885a128.711 128.711 0 0 0 33.941 33.941l-62.885 62.885a217.366 217.366 0 0 1-33.941-33.941zm60.814 52.323l66.139-66.14c26.99 9.325 56.618 9.33 83.624 0l66.14 66.14c-66.716 38.524-149.23 38.499-215.903 0zm242.776-18.381l-62.885-62.885a128.711 128.711 0 0 0 33.941-33.941l62.885 62.885a217.323 217.323 0 0 1-33.941 33.941zm52.323-60.814l-66.14-66.14c9.325-26.99 9.33-56.618 0-83.624l66.14-66.14c38.523 66.715 38.5 149.229 0 215.904z" class=""></path></svg>Support</button></mat-toolbar>

navbar.component.scss

.mat-toolbar {
padding-top: 2px;
padding-left: 30px;
background-color: #fff;
}
::ng-deep .nav-tool-bar{
button{
.mat-button-focus-overlay{
opacity: 0!important;
}
.nav-bar-icon{
width: 16px;
}
span{
font-size: 15px;
}
}
.active-list-item{
background-color: #c79652;
span{
color: #fff;
font-size: 15px;
svg{
path{
color: #fff;
}
}
}
}
}

更改scss# EYZ0背景色很重要。

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

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


constructor(private route: ActivatedRoute) {}


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

在花了一些时间寻找解决方案后，我找到了Angular 13.1.1的两个更新的变通方案:

1. 第一选择:

  constructor(private router: Router) {
router.events.forEach((event) => {
if (event instanceof NavigationStart) {
// Your code
// Use (event.url) to get URL that is being navigated
}
});
}

2. 第二个选项

 routerSubscription: Subscription | undefined;


constructor(private router: Router) {}




ngAfterViewInit(): void {
this.routerSubscription = this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
// Your code
// Use (event.url) to get URL that is being navigated
}
});
}

记得取消订阅销毁循环

 ngOnDestroy(): void {
this.routerSubscription?.unsubscribe();
}

还要根据您的情况注意是否更好地使用

事件实例的NavigationStart

或

事件实例的NavigationEnd

this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this.showProgressBar = true
} else if (event instanceof NavigationEnd) {
this.showProgressBar = false
}
else if (event instanceof NavigationCancel) {
this.showProgressBar = false
}
})

您可以在任何事件路由状态下订阅