Angular应用初始加载时router.url始终指向'/'根路径的问题求解

你遇到的取值不一致问题，本质是Angular的初始路由导航是独立于组件生命周期的异步流程：

• 应用启动时，Angular会先完成根组件的初始化（执行构造函数、触发ngOnInit钩子），之后才会开始解析浏览器地址栏的真实路径、执行路由匹配、路由守卫、重定向等一系列异步流程
• 你在ngOnInit里同步读router.url的时候，路由系统还没开始处理真实地址，所以拿到的是路由未初始化时的默认值'/'
• 之前测试的100ms延时后拿到正确值，只是刚好赶在路由异步流程跑完的时间点，但这个等待时长是完全不确定的——如果路由涉及懒加载组件、异步权限校验，100ms可能连一半的流程都跑不完，完全属于不可靠的临时方案

方案1：通过路由导航完成事件获取准确路由值（最通用，无侵入） #

Router服务内置了全流程的路由事件流，其中NavigationEnd事件的触发时机，就是当前地址的所有路由解析、导航流程完全结束的时刻，这个时候路由状态已经和浏览器地址栏完全同步，不会出现取值偏差。
直接修改现有代码即可：

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

// 原有注入逻辑保留
constructor(private router: Router) {}

ngOnInit() {
  // 订阅路由导航事件
  this.router.events.pipe(
    // 只筛选导航完成的有效事件
    filter(event => event instanceof NavigationEnd),
    // 如果只需要初始加载时的路由值，加take(1)实现自动退订；如果需要持续跟踪后续路由跳转，去掉这个操作符即可
    take(1)
  ).subscribe((navInfo) => {
    // 这里拿到的就是经过重定向处理后的最终真实路径，和地址栏完全一致
    console.log('真实路由值：', navInfo.urlAfterRedirects);
    // 此时再读router.url也已经是同步后的正确值
    console.log('同步后的router.url：', this.router.url);
  });
}

这个方案是确定性的可靠逻辑：不管路由解析耗时多久，只要导航完成就会立刻触发回调，完全不会出现因为等待时长不够取错值的问题。

方案2：强制等待初始导航完成再启动应用（适合全局初始化场景） #

如果你的业务需要在应用启动最早期（比如全局权限校验、埋点上报、动态路由初始化）就拿到准确的初始路由值，可以通过APP_INITIALIZER配置，让应用启动流程等初始导航完全结束后再继续。配置完成后，所有位置同步读取router.url都能拿到正确值，不需要额外的事件订阅。
参考配置：

// 在根模块/独立应用的providers数组中添加
{
  provide: APP_INITIALIZER,
  useFactory: (router: Router) => {
    return () => {
      // 等首次导航完成后再放行应用启动流程
      return firstValueFrom(
        router.events.pipe(
          filter(event => event instanceof NavigationEnd),
          take(1)
        )
      );
    };
  },
  deps: [Router],
  multi: true
}

• 不要在组件构造函数、ngOnInit的同步执行流里直接读取router.url，此时路由导航往往还没启动，必然拿到默认的根路径值
• 不要用固定时长的setTimeout、延时等待做路由取值的临时方案，这类逻辑在弱网、路由逻辑复杂的场景下非常容易引出难以排查的隐蔽bug

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