Angular：使用Activated Route订阅当前路由异常问题

首先明确：ActivatedRoute.url返回UrlSegment[]是正常行为——Angular会将路由路径拆分为多个片段对象。但path为空通常是以下几个原因导致，对应解决方案如下：

1. 组件未处于激活路由的渲染范围内 #

如果你的组件是直接放在根组件（比如AppComponent）中，没有通过<router-outlet>渲染，或者所在路由的path配置为空字符串，url数组中的Segment自然会是空值。

解决：确保组件通过<router-outlet>渲染，且对应路由的path设置为非空的有效路径（默认路由除外）。

2. 订阅时机过早 #

在constructor中直接订阅route.url时，路由可能还未完成初始化，会拿到初始的空Segment。

解决：移到ngOnInit钩子中订阅，或结合first()操作符等待路由稳定：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { first } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.url.pipe(first()).subscribe(urlSegments => {
      const currentPath = urlSegments.map(s => s.path).join('/');
      console.log('当前路由片段:', currentPath);
    });
  }
}

3. 需要获取完整路由而非当前组件的路由片段 #

如果你的组件是嵌套路由的子组件，仅订阅当前ActivatedRoute.url只能拿到本级路由的片段，若要获取完整路由路径，有两种方式：

方式一：通过Router监听NavigationEnd事件 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      console.log('完整路由路径:', event.url);
    });
  }
}

方式二：递归遍历ActivatedRoute的父级节点 #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    const getFullRoutePath = (route: ActivatedRoute): string => {
      let path = route.url.value.map(s => s.path).join('/');
      if (route.parent) {
        path = `${getFullRoutePath(route.parent)}/${path}`;
      }
      return path.replace(/\/+/g, '/'); // 清理多余斜杠
    };

    console.log('完整路由路径:', getFullRoutePath(this.route));
  }
}

按官方文档实现的正确方式 #

官方文档中使用ActivatedRoute.url的场景，是获取当前激活路由的片段，若只需当前组件对应的路由部分，直接订阅后转换为字符串即可：

this.route.url.subscribe(urlSegments => {
  const currentSegment = urlSegments.map(segment => segment.path).join('/');
  console.log('当前路由片段:', currentSegment);
});

内容的提问来源于stack exchange，提问作者Optiq