路线参数类型转换

rze*_*rze 6 typescript angular2-routing angular

我目前正在阅读Angular 2 教程并学习如何使用带参数的路由器通过id获取对象数据.

以下是用于参考我将要问的问题的代码.

以下是app.module.ts基于id指向组件的路径定义

      {
        path:'detail/:id',
        component:HeroDetailComponent
      }
Run Code Online (Sandbox Code Playgroud)

服务方法(来自Service类),用于根据id获取数据

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

用于从网址中提取信息的构造函数和OnInit方法(来自显示数据的hero-details.component)

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));
}
Run Code Online (Sandbox Code Playgroud)

最后是我们提取的数据的例子.id是类型编号和名称类型字符串.

{ id: 11, name: 'Mr. Nice' }
Run Code Online (Sandbox Code Playgroud)

问:ngOnInit我们从一个字符串转换将ID号的参数范围内this.heroService.getHero()调用.+params['id']转换方面的工作究竟如何?我的猜测是,这是由于我们在app.module.ts文件中布置路线的方式,这detail/:id相当于params['id']但我希望有一个明确的探索,以便我知道我将来会做些什么.谢谢

小智 10

params对象是由Angular2路由器构建和填充的构造,用于保存您在路由上指定的参数.键值对匹配:id(键)和运行时的实际路径值.参数可以包含多个参数.

你所指的加号(+ params ['id'])是一个标准的javaScript运算符,它告诉解释器将param结果从它的任何类型(字符串)转换为数字.

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

一元加运算符在其操作数之前,并计算其操作数,但尝试将其转换为数字(如果尚未).

+3     // 3
+"3"   // 3
+true  // 1
Run Code Online (Sandbox Code Playgroud)