Búsqueda de sitios web

javascript - Angular2+ | Cómo definir el enrutamiento con parámetros en NgModule

Soy bastante nuevo con el enrutamiento de Angular y no pude encontrar ninguna solución para este caso. Tengo un componente de Inicio de sesión y un módulo de Usuario. Hay un <router-outlet> en el componente App, uno en el componente UserBase del módulo de Usuario. Aquí está mi declaración de rutas.

app.module.ts

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
];

imports: [
    RouterModule.forRoot(routes),
    UserModule,
],

usuario.módulo.ts

const routes: Routes = [
  {
    path: ':username',
    component: UserBaseComponent,
    children: [
      {
        path: '',
        component: UserDetailsComponent,
      },
      {
        path: 'progress',
        component: ProgressComponent,
      },
      {
        path: 'timeline',
        component: TimelineComponent,
      },
      {
        path: 'leaderboard',
        component: LeaderboardComponent,
      }
    ],
  }
];

imports: [
    RouterModule.forChild(routes)
]

Funciona bien con la ruta para el módulo de usuario, pero sigue reconociendo 'login' como un nombre de usuario y no navega al componente de Inicio de sesión. De hecho, si agrego una ruta estática antes del parámetro de esta manera, funciona correctamente.

{
  path: 'user',
  children: [
    {
      path: ':username',
      component: UserBaseComponent,
      children: [
        {
          path: '',
          component: UserDetailsComponent,
        },
        {
          path: 'progress',
          component: ProgressComponent,
        },
        {
          path: 'timeline',
          component: TimelineComponent,
        },
        {
          path: 'leaderboard',
          component: LeaderboardComponent,
        }
      ],
    }
  ]
}

¿Alguien podría explicar por qué?

Respuesta #1

Cuando importas módulos con su propio enrutamiento dentro de tu módulo principal, las rutas de los submódulos se colocan delante de las rutas principales.

Entonces tu enrutamiento se ve así cuando importas el UserModule.

- :username
    - /
    - progress

- login

Cuando se lee el enrutamiento, comienza desde la parte superior, por lo que :username se lee primero. Esa ruta coincide con todo, por lo que no se accederá a ninguna otra ruta.

Puedes intentar y cargar de manera diferida tu módulo de usuario, de esta manera estás en control del orden de las rutas. Nota que ya no declaras el UserModule como una importación.

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    loadChildren: '<PATH_TO_MODULE>/user.module#UserModule'
  },
];

imports: [
    RouterModule.forRoot(routes)
]

Aquí hay un Stackblitz: https://stackblitz.com/edit/ng-stackoverflow-52391592

Respuesta #2

Tu user.module también está funcionando. pero funcionará si tu URL es como esta: https:\\www.google.com\2

path: ':username',
component: UserBaseComponent,
children: [
     {
        path: '',
        component: UserDetailsComponent,
      },
]

y el siguiente código funciona con https:\\www.google.com\user\2.

path: 'user',
children: [
    {
      path: ':username',
      component: UserBaseComponent,
      children: [
          {
            path: '',
            component: UserDetailsComponent,
          },
     }
]

En el segundo código de tu user.module, no habías definido ningún componente, solo definiste sus hijos. Así que cuando ejecutes tu componente hijo, se ejecutará como hermano y no como componente hijo.

Porque si quieres ejecutar un componente hijo dentro de un componente padre, debes definir más <router-outlet> dentro de tu componente padre.

Angular da por defecto <router-outlet> dentro de app.component.html cuando creas la aplicación.

Aquí está el Stackblitz funcionando con padre-hijo y con parámetros. Que puedes modificar según tus necesidades.

Artículos relacionados