angular – Route params类型转换

前端之家收集整理的这篇文章主要介绍了angular – Route params类型转换前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前正在浏览Angular 2 tutorial,并学习如何使用带参数的路由器通过id获取对象数据.

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

这是路径定义withinapp.module.ts,用于根据id指向组件

  1. {
  2. path:'detail/:id',component:HeroDetailComponent
  3. }

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

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

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

  1. constructor(
  2. private heroService: HeroService,private route: ActivatedRoute,private location: Location
  3. ){}
  4.  
  5. ngOnInit():void{
  6. this.route.params
  7. .switchMap((params:Params) => this.heroService.getHero(+params['id'])
  8. .subscribe(hero => this.hero = hero));
  9. }

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

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

问题:在ngOnInit中,我们将字符串中的id转换为this.heroService.getHero()调用参数中的数字. params [‘id’]在转换方面究竟是如何工作的?我的猜测是,这是因为我们在app.module.ts文件中布置路径的方式和详细信息/:id相当于params [‘id’],但我想要一个明确的探索,以便我知道我是什么我将来肯定会这样做.谢谢

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

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

看到这个参考:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_(.2B)

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

  1. +3 // 3
  2. +"3" // 3
  3. +true // 1

猜你在找的Angularjs相关文章