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

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


当前回答

在花了一些时间寻找解决方案后,我找到了Angular 13.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
      }
    });
  }

第二个选项

routerSubscription:订阅| undefined; 构造函数(私有路由器:router) {} ngAfterViewInit(): void { 这一点。routerSubscription = this.router.events.subscribe((event) => { if(事件实例of NavigationEnd) { //你的代码 //使用(event.url)获取正在导航的URL } }); }

记得取消订阅销毁循环

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

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

事件实例的NavigationStart

or

事件实例的NavigationEnd

其他回答

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

Angular 7,如果你想订阅路由器

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

我从RC 5开始这样做

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

在花了一些时间寻找解决方案后,我找到了Angular 13.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
      }
    });
  }

第二个选项

routerSubscription:订阅| undefined; 构造函数(私有路由器:router) {} ngAfterViewInit(): void { 这一点。routerSubscription = this.router.events.subscribe((event) => { if(事件实例of NavigationEnd) { //你的代码 //使用(event.url)获取正在导航的URL } }); }

记得取消订阅销毁循环

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

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

事件实例的NavigationStart

or

事件实例的NavigationEnd

路由器3.0.0-beta。2应该是

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