0

En mi archivo app.routes.ts tengo estas definiciones:

const APP_ROUTES: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: 'star-ships', component: StarShipsComponent },
    { path: 'starship/:id', component: StarshipComponent },
    { path: '**', pathMatch:'full', redirectTo: 'star-ships' }
];

La ruta 'starship/:id' no funciona ni llamada desde el navegador ni desde una función del componente con .navigate

Si le quito el parámetro '/:id' ya se puede llamar desde navegador y .navigate:

{ path: 'starship', component: StarshipComponent },

No consigo ver el problema y necesito pasar el parámetro, ¿alguna idea por favor?

Muchas gracias

3
  • La ruta 'starship/:id' espera un parámetro si no se lo pasas no encuentra ninguna coincidencia y no renderiza ningún componente. Si quieres navegar a dicho componente tienes que pasar un id o cualquier cosa que espera ese componente desde la ruta. Por ejemplo, 'starship/1234' esta ruta si que concuerda con la que espera angular.
    – hawks
    el 23 oct. 2020 a las 13:01
  • Efectivamente 'starship/1234' funciona si defino el parámetro '/:id' en la ruta. En cambio no funciona si utilizo .navigate( ['/starship', sh] ). Si no uso el parámetro '/:id', el .navigate si funciona. Lo importante es el .navigate, así se queda funcionando. Muchas gracias
    – Xavi T.
    el 23 oct. 2020 a las 13:58
  • intentebta removiendo esta linea { path: '**', pathMatch:'full', redirectTo: 'star-ships' } el 26 oct. 2020 a las 20:40

3 respuestas 3

0

la función que estas usando es this.router.navigate(['algo']) verdad?

Si es asi, la id no se la debes pasar con una ",", debe ser con un símbolo "+" para que quede concatenado, algo asi como el siguiente ejemplo:

navigateStarship(starship_id:string){
    this.router.navigate(['/starship' + starship_id]);
}
1
  • La información aportada por hawks fué suficiente para poder hacer funcionar el .navigate. Esta me permitió comprender cómo funciona y decidir la mejor opción. Gracias
    – Xavi T.
    el 28 oct. 2020 a las 14:28
0

Hola compañero para poder acceder a la ruta con un parámetro utilizando la etiqueta <a></a>, debes utilizar el siguiente código

<a [routerLink]="['/tu-ruta-del-path/', elValorDelParámetro">
el icono</a>

y para utilizar el navigate sería así

this.router.navigate(['tu-ruta-del-path',elValorDelParámetro])

espero que te ayude amigo

2
  • no olvides importar el router de angular y colocarlo en el constructor el 7 nov. 2020 a las 20:39
  • En su día, this.router.navigate(['/heroe', idx]); me funionó con la ruta { path: 'heroe/:id', component: HeroeComponent },. Poco después, lo expuesto en el mensaje de cabecera no y tuve que quitar el '/:id' del path para que funcionara.
    – Xavi T.
    el 9 nov. 2020 a las 7:53
0

introducir la descripción de la imagen aquí

Hola mira solo asi te quitas de broncas xd jeje saludos devs

1
  • 1
    Por favor, lee Cómo responder y haz el recorrido de bienvenida para conocer el funcionamiento del sitio. 1. No uses imágenes salvo que sea explícitamente necesario, ya que no todos pueden verlas, 2. en ningún momento explicaste qué aparece en la imagen. Pulsa en editar para mejorar tu respuesta, o elimínala directamente.
    – padaleiana
    el 31 ago. 2022 a las 11:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.