javascript - ¿Cómo implementar el enrutamiento con id correctamente?
Quiero hacer rutas con un Id entre las páginas. Lo hago con [routerLink]. Pero cuando ejecuto la aplicación obtengo un error: Error: Cannot find module '../friend/friend-details.module'. Supongo que no escribí correctamente la ruta, pero no sabría qué más podría intentar. Así que quiero navegar a friend-details y pasar el id para que sepa cuál era el elemento. La carpeta friend-details está en la carpeta friend, así que la ruta debería funcionar realmente.
pagina.html
<ion-card *ngFor="let friend of loadedFriends">
<ion-avatar [routerLink]="['/', 'tabs', 'friend', friend.id]" slot="start">
</ion-card>
tabs.router.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage, //render component that holds your tabs
children: [
{
path: 'friend',
children: [
{
path: '',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
},
EDITAR :
Probé una solución en la que utilicé un evento de clic:
openFriendDetails() {
this.router.navigate(['friend/:id']);
}
del cual tomo acceso desde app-routing.module.ts
{ path: 'friend/:id', loadChildren: './friend-details/friend-details.module#FriendDetailsPageModule' },
La navegación funciona después de este cambio. Pero de alguna manera no puedo usar mi id ya que la página de detalles del amigo está congelada de alguna manera y ya no puedo cambiar de página.
Respuesta #1
primero necesitas cambiar tu children a esto
children: [
{
path: '',
pathMatch: 'full',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
entonces también necesitas agregar path: '', component: yourcomponent en tu enrutamiento de FriendDetailsPageModule
Respuesta #2
verifica la ruta de tu módulo de detalles del amigo y pon id como segundo parámetro del enlace del enrutador. por ejemplo: [routerLink]="['/tabs/friend', friend.id]" esto generará la ruta /tabs/friend/:friendId y puedes acceder a ella mediante ActivatedRoute.params.friendId en tu componente
