如何在AppComponent的ngOnInit中正确获取路由URL与参数，无需使用setTimeout

AppComponent作为应用根组件，其ngOnInit生命周期触发时机早于Angular路由系统的首次导航完成流程，因此直接读取this.router.url只会拿到初始空值，固定延迟的setTimeout属于不可靠的hack写法，受应用首次加载速度影响极大。

方案1：监听路由导航完成事件（最常用） #

通过监听Router的NavigationEnd事件，确保只有导航完成后才读取URL，代码如下：

// app.component.ts
import { Router, NavigationEnd } from '@angular/router';
import { filter, take } from 'rxjs';

constructor(private router: Router) {}

ngOnInit(): void {
  this.router.events.pipe(
    // 过滤只保留导航完成事件
    filter((event): event is NavigationEnd => event instanceof NavigationEnd),
    // 如果只需要获取首次导航的URL，加take(1)拿到值后自动销毁订阅
    take(1)
  ).subscribe(() => {
    // 此时读取的url为正确的当前路由地址
    console.log(">>>> ", this.router.url);
    // 在这里写你的重定向逻辑
  });
}

如果需要持续监听路由变化做逻辑处理，去掉take(1)即可，记得在ngOnDestroy中取消订阅避免内存泄漏。

方案2：同时获取路由参数 #

如果除了URL还需要读取路由的路径参数、查询参数，需要配合ActivatedRoute使用：

// app.component.ts
import { Router, NavigationEnd } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { filter } from 'rxjs';

constructor(
  private router: Router,
  private activatedRoute: ActivatedRoute
) {}

ngOnInit(): void {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 读取根路由查询参数
    this.activatedRoute.queryParams.subscribe(params => {
      console.log('查询参数：', params);
    });
    // 读取子路由参数（如果是嵌套路由结构）
    let childRoute = this.activatedRoute.firstChild;
    while (childRoute?.firstChild) {
      childRoute = childRoute.firstChild;
    }
    childRoute?.params.subscribe(pathParams => {
      console.log('路径参数：', pathParams);
    })
  });
}

方案3：路由守卫实现重定向（更符合设计规范） #

如果你的核心需求是根据路由信息判断重定向目标，更推荐使用路由守卫CanActivate实现，不需要在根组件中写逻辑：

1. 生成守卫：ng generate guard redirect
2. 守卫代码示例：

// redirect.guard.ts
import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';

export const redirectGuard: CanActivateFn = (route, state) => {
  const router = inject(Router);
  // state.url就是当前要访问的路由地址，route里可以直接拿到参数
  const currentUrl = state.url;
  if (/* 你的重定向判断条件 */) {
    return router.parseUrl('/目标路由');
  }
  return true;
};

3. 在路由配置中给根路径或者需要做判断的路由加上该守卫即可。

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