Angular 5中访问ActivatedRoute私有属性报错及懒加载路由URL问题

我之前也踩过这个坑！预加载路由时用activatedRoute.snapshot.url能正常拿到按/分割的路径数组，切到懒加载就直接返回空数组，确实挺头疼的。而且你发现的那个私有属性_urlSegment.segments虽然结果对，但Angular官方完全不建议用私有属性——不仅会触发报错，后续版本更新还可能直接把这个属性改掉，完全不靠谱。

给你两个靠谱的解决方案，都是用Angular的公开API：

方案1：遍历路由树获取完整路径段 #

懒加载时，当前的activatedRoute可能只是子路由实例，而完整的路径需要从根路由到当前路由的所有段拼接起来。用activatedRoute.pathFromRoot就能拿到整个路由链，然后逐个收集路径段：

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

constructor(private activatedRoute: ActivatedRoute) {}

getFullPathSegments(): string[] {
  let fullSegments: string[] = [];
  // 遍历从根到当前的所有路由节点
  this.activatedRoute.pathFromRoot.forEach(route => {
    // 把每个路由的路径段拼接到结果里
    fullSegments = fullSegments.concat(
      route.snapshot.url.map(segment => segment.path)
    );
  });
  // 过滤掉可能存在的空字符串
  return fullSegments.filter(segment => segment.trim() !== '');
}

调用这个方法就能得到和预加载时activatedRoute.snapshot.url一致的路径数组，完全不用碰私有属性。

方案2：订阅路由URL变化（适合实时响应场景） #

如果你的逻辑需要实时监听路由变化，那可以直接订阅activatedRoute.url，懒加载路由加载完成后，这个Observable会发出最新的路径段：

import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';

constructor(private activatedRoute: ActivatedRoute) {}

ngOnInit(): void {
  this.activatedRoute.url.pipe(
    map(urlSegments => urlSegments.map(seg => seg.path))
  ).subscribe(segments => {
    console.log('当前完整路径数组：', segments);
    // 在这里处理你的业务逻辑
  });
}

为什么懒加载时activatedRoute.snapshot.url为空？ #

简单说就是懒加载路由是异步加载的，当组件初始化时，当前路由的快照还没完全生成，所以url是空的。而pathFromRoot会包含已经加载完成的父路由快照，加上后续加载完成的子路由快照，就能凑出完整的路径。

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