从列表重定向到 3 个不同的组件

Question

我需要将一个Listing的信息发送给3个组件，发送一个id并允许编辑信息；如果用户单击编辑按钮，它将打开 ArticulosComponent、LibroComponent 或 CapitulosComponent，但这些组件来自其他组件。

在编辑按钮中，我必须根据列表中的 selection 将其重定向到一个组件，例如：如果您 select Articulo 它会转到 articulo 组件，为此我有这个方法：

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;
            }
          }
        }
      
    //});

  }

我的二级路由器模块是这样的...

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 { }

实现此目标的最佳方法是什么？

Answer 1

恕我直言，你几乎完成了，唯一剩下的就是更新辅助路由模块中的路径。

像这样的东西应该有效：

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

从列表重定向到 3 个不同的组件

Redirect From a list to 3 different components

angular

angular7-router