为何在App组件中注入服务会导致URL参数为undefined？

这种情况我之前碰到过好几次，核心问题基本都是路由初始化时机不对导致的，咱们来一步步拆解原因和解决办法：

可能的原因 #

• 服务构造函数执行过早：Angular的服务是单例模式，首次被注入时就会实例化。如果你的AppComponent是应用的根组件，服务的构造函数可能在路由还没完成URL解析、参数还没准备好的时候就跑起来了。这时候this.router.url里根本还没有你要的todo参数，自然取到的就是undefined。
• AppComponent初始化时机影响：当你把服务注入到AppComponent的构造函数时，服务会优先于AppComponent实例化，而AppComponent本身可能在路由导航完成前就开始初始化，进一步导致服务里的参数获取逻辑跑早了。

可行的解决方案 #

1. 监听路由导航完成事件获取参数 #

不要在服务构造函数里直接硬取参数，而是通过router.events监听导航完成的事件，确保路由完全就绪后再解析参数：

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

// my-service.service.ts 代码
public param1;

constructor(public router: Router, private http: HttpClient) {
  this.router.events.pipe(
    // 只监听导航完成的事件
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    this.param1 = this.router.parseUrl(this.router.url).queryParams['todo'];
    console.log('param1: ' + this.param1);
  });
}

2. 利用组件生命周期钩子延迟获取 #

把服务里的参数获取逻辑抽成独立方法，然后在AppComponent的ngOnInit钩子（这个钩子会在组件初始化完成、路由基本就绪后触发）里调用：

// my-service.service.ts
public param1;

constructor(public router: Router, private http: HttpClient) {}

getQueryParams() {
  this.param1 = this.router.parseUrl(this.router.url).queryParams['todo'];
  console.log('param1: ' + this.param1);
}

// app.component.ts
constructor(private myService: MyService) {}

ngOnInit() {
  // 等到组件初始化完成后再调用服务方法
  this.myService.getQueryParams();
}

3. 使用ActivatedRoute（更推荐） #

Angular专门提供了ActivatedRoute来处理路由参数，它是响应式的，不仅能在初始导航时获取参数，参数变化时也能自动更新，比直接解析URL更可靠：

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

// my-service.service.ts 代码
public param1;

constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(params => {
    this.param1 = params['todo'];
    console.log('param1: ' + this.param1);
  });
}

内容的提问来源于stack exchange，提问作者k.vincent