路由参数类型转换

Question

我正阅读Angular 2 教程，学习如何使用带有参数的路由器通过id获取对象数据。

以下是与我将要提出的问题相关的代码。

下面是app.module.ts中用于根据id引导到组件的路由定义。

      {
        path:'detail/:id',
        component:HeroDetailComponent
      }

从服务类中获取基于id的数据的服务方法

getHero(id: number): Promise<Hero> {
    return this.getHeroes()
    .then(heroes => heroes.find(hero => hero.id === id));
}

构造函数和OnInit方法（来自hero-details.component，用于显示数据）用于从URL中提取信息

constructor(
private heroService: HeroService,
private route: ActivatedRoute,
private location: Location
){}

ngOnInit():void{
  this.route.params
    .switchMap((params:Params) => this.heroService.getHero(+params['id'])
      .subscribe(hero => this.hero = hero));
}

最后，我们来看一下我们正在提取的数据示例。id是数字类型，名称是字符串类型。

{ id: 11, name: 'Mr. Nice' }

问题：在ngOnInit中，我们将id从字符串转换为this.heroService.getHero()调用的参数之内。请问+params['id']如何进行转换？我的猜测是由于我们在app.module.ts文件中设置路由的方式，detail/:id等同于params['id']，但我想要一个清晰的解释，以便我将来可以确定自己在做什么。谢谢。

- rze

---

路由参数始终是字符串，你可以自行决定如何处理这个参数。 - Artin Falahi

Answer 1

参数对象是由Angular2路由器构建和填充的构造，用于保存您在路由上指定的参数。键值对匹配:id（键）和运行时实际路由值。Params可以保存多个参数。

您提到的加号(+params['id'])是一个标准的JavaScript运算符，它告诉解释器将参数结果从其当前类型（字符串）转换为数字。

请参见此参考文献：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_(.2B)

一元加运算符位于其操作数之前，并将其求值为操作数，但如果操作数不是数字，则尝试将其转换为数字。

+3     // 3
+"3"   // 3
+true  // 1

- MickG