Búsqueda de sitios web

angular - Conversión de tipo de los parámetros de la ruta


Actualmente estoy siguiendo el tutorial de Angular 2 y aprendiendo cómo usar el router con parámetros para obtener datos de un objeto mediante un id.

A continuación se muestra el código utilizado en referencia a la pregunta que haré.

Aquí está la definición de la ruta dentro de app.module.ts para dirigir a un componente basado en un id

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

Método de servicio (de la clase Service) para obtener los datos basados en el id

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

Y el constructor y el método OnInit (del componente hero-details donde se mostrarán los datos) se utilizan para obtener la información de la 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));
}

Y finalmente un ejemplo de los datos que estamos obteniendo. id es de tipo número y name de tipo cadena.

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

PREGUNTA: Dentro de ngOnInit convertimos el id de una cadena a un número dentro de los parámetros de la llamada this.heroService.getHero(). ¿Cómo funciona exactamente +params['id'] en términos de conversión? Mi suposición era que se debe a la forma en que configuramos la ruta dentro del archivo app.module.ts y que detail/:id es equivalente a params['id'], pero quiero una explicación clara para saber con certeza lo que estoy haciendo en el futuro. Gracias

Respuesta #1

El objeto params es una construcción creada y poblada por el enrutador de Angular2 para contener los parámetros que especificas en las rutas. Los pares clave-valor coinciden con el :id (clave) y el valor real de la ruta en tiempo de ejecución. Params puede contener más de un parámetro.

El más (+params['id']) al que te refieres es un operador estándar de JavaScript que indica al intérprete que convierta el resultado del parámetro de cualquier tipo que sea (cadena) a un número.

Consulta esta referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_(.2B)

El operador unario más precede a su operando y se evalúa como su operando, pero intenta convertirlo en un número, si no lo es ya.

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

Artículos relacionados