我正在寻找在我的AppComponent中检测路由变化。

然后,我将检查全局用户令牌,以查看用户是否已登录,以便在用户未登录时重定向该用户。


当前回答

对于Angular 7,应该这样写:

this.router.events。订阅((事件:事件)=> {})


具体示例如下:

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

   }
}

其他回答

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

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

只需在AppRoutingModule上进行更改

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

角8。检查当前路由是否为基路由。

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

在Angular 2中,你可以订阅(Rx事件)一个Router实例。 你可以这样做

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

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