时间戳

首页 > 解决方案 > 具有嵌套子组件的角路由结构

angular - 具有嵌套子组件的角路由结构

问题描述

我的Angular Web 面板具有如下路由分支：

const routes: Routes = [
  {
    path: 'home', component: HomeComponent, data: { },
    children: [
      { path: '', redirectTo: 'user', pathMatch: 'full' },
      {
        path: 'user', component: UserComponent, data: { },
        children: [
          { path: '', redirectTo: 'products', pathMatch: 'full' },
          { path: 'products', component: ProductsComponent, data: { }, 
            children: [
              { 
                path: ':id', component: ProductDetail, data: { } 
              },
            ]
          }
        ]
      }
    ]
  }
];

HomeComponent e UserComponent只是childs 的路由器出口。

ProductsComponent有一个product 列表。

ProductDetail组件没有出现，因为他的父亲ProductsComponent在他的 html 中 没有“router-outlet”标签。

路由结构应该如何，才能拥有一个拥有产品列表的父亲和拥有产品详细信息的孩子？

将ProductsComponent和ProductDetail都设置为UserComponent的子级可以解决问题，但是在我的面包屑中创建一个丑陋的结构（home > user > list和home > user > detail）

我的目标是拥有一个具有良好组件结构的面包屑。喜欢主页 > 用户 > 列表 > 详细信息。

标签： angularangular-ui-routerangular2-routing

解决方案

我正在使用手机，请原谅任何格式错误，稍后我将对其进行编辑。

如果我理解正确，您应该能够通过使用以下路由配置来实现您想要的：

const routes: Routes = [
  {
    path: 'home', component: HomeComponent, data: { },
    children: [
      { path: '', redirectTo: 'user', pathMatch: 'full' },
      {
        path: 'user', component: UserComponent, data: { },
        children: [
          { path: '', redirectTo: 'products', pathMatch: 'full' },
          { path: 'products', component: ProductsComponent, data: { }}, 
{path: 'products/:id', component: ProductDetail, data: { }} 
            ]
          }
        ]
      }
    ]
  }
];

您不需要嵌套组件以获得“不错”的路线，您可以在path属性中创建它。

此外，如果您的 HomeComponent 和 UserComponent 只是路由器插座，您可能可以将所有内容简化为

const routes: Routes = [
    { path: 'home/user/products', component: ProductsComponent, data: { }}, 
    {path: 'home/user/products/:id', component: ProductDetail, data: { }} 
];

然后添加正确的 redirectTo 子句。

推荐阅读