Angular 2.0.0中ActivatedRoute参数解析失败及路由参数获取问题

嘿，我来帮你搞定这个问题！你遇到的错误是Angular 2.0.0这个早期版本的依赖注入需要明确的元数据支持，另外你的路由配置里还有个小笔误，咱们一步步来修复：

第一步：修正路由配置的组件名称笔误 #

你导入的组件是Users_detail，但路由配置里写的是User_retailer，这会导致组件匹配失败，先把这个错误改过来：

@RouteConfig([
 {path:'/users', name: 'Users', component: Users},
 {path:'/users_detail/:id', name: 'Users_detail', component: Users_detail}, // 把User_retailer替换成Users_detail
])

第二步：解决依赖注入的参数解析错误 #

在Angular 2.0.0中，依赖注入需要明确的类型元数据才能正确解析，你有两种可行的解决方式：

方式1：给组件添加@Injectable()装饰器

在你的Users_detail组件类上方加上@Injectable()装饰器（记得先导入它）：

import { Injectable, Component } from 'angular2/core';
import { Router, ActivatedRoute } from 'angular2/router';

@Injectable()
@Component({
  // 你的组件元数据，比如selector、template、styles等
})
export class Users_detail {
  constructor(private route: ActivatedRoute) { }

  // 后续获取参数的代码写在这里
}

方式2：用@Inject显式标注依赖

如果不想给组件加@Injectable()，可以在构造函数参数里用@Inject来明确指定依赖类型：

import { Inject, Component } from 'angular2/core';
import { Router, ActivatedRoute } from 'angular2/router';

@Component({
  // 组件元数据
})
export class Users_detail {
  constructor(@Inject(ActivatedRoute) private route: ActivatedRoute) { }

  // ...
}

第三步：正确获取路由参数id #

别在构造函数里直接获取参数，因为此时路由可能还没完成初始化。建议在ngOnInit生命周期钩子中订阅route.params来获取参数：

import { OnInit, Component } from 'angular2/core';
import { Router, ActivatedRoute } from 'angular2/router';

@Component({
  // 组件元数据
})
export class Users_detail implements OnInit {
  private userId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    // 订阅params流来获取id参数
    this.route.params.subscribe(params => {
      this.userId = params['id'];
      console.log('当前用户ID:', this.userId);
      // 这里可以根据id做后续操作，比如请求用户详情数据
    });
  }
}

另外还要提醒你：确保在启动应用时已经注入了路由相关的服务，也就是在bootstrap函数中加入ROUTER_PROVIDERS：

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

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