Redirect From a list to 3 different components

Question

I need to send information of a Listing to 3 components, sending an id and enable the editing of the information; if the Users click in Edit button, it will opens the ArticulosComponent, LibroComponent, or CapitulosComponent, but those components are from other component.

In the edit button, I MUST redirect it to a component according to the selection from the list, for example: If you select Articulo it goes to the articulo component, for this I have this method:

EditarProducto(item) {
     debugger;

    let tipoProducto = item.tipoProducto; 
    let Lista = item; 

        if (tipoProducto != null && tipoProducto != undefined && Lista != null && tipoProducto != Lista) {

          switch (tipoProducto) {
            case "Artículo":
              {
                this.router.navigate(['/RegistroProductos/Articulos', { id: item.idProducto }])                break;
              }
            case "Libros": {
                 this.router.navigate(['/RegistroProductos/Libros', { id: item.idProducto }]);

              break;
            }
            case "Capítulos": {
                                
                 this.router.navigate(['/RegistroProductos/Capitulos', { id: item.idProducto }]);
              break;
            }
          }
        }
      
    //});

  }

my secundary router module are like this...

const routes: Routes = [
  {
    path: '',
    component: RegistroProductosComponent,
    children: [
      {
        path: ':id', component: ArticulosComponent
      },
      {
        path: ':id', component: CapitulosComponent
      },
      {
        path: ':id', component: LibrosComponent
      }
    ]
  },

  { path: '**', redirectTo: '/productos', pathMatch: 'full'}

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RegistroProductosRoutingModule { }

which is the best way to achive this?

Answer 1

IMHO you're almost done, the only thing remaining is to update your paths in the secondary routing module.

Something like this should works:

children: [
      {
        path: '/Articulos/:id', component: ArticulosComponent
      },
      {
        path: '/Capitulos/:id', component: CapitulosComponent
      },
      // ...