Búsqueda de sitios web

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