Question

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

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 和 UserComponent 只是儿童的路由器插座。

产品组件具有一个产品列表。

ProductDetail 组件不出现，因为他的父亲 ProductsComponent 没有“路由器出口” 在他的html中标记。

为了拥有自己的产品，路由结构应该是一个父亲，而产品详细信息应该是一个孩子？

将 ProductsComponent 和 ProductDetail 都设置为 UserComponent 的子代即可解决此问题，但在面包屑中创建了一个丑陋的结构（ home >用户>列表和 home>用户>详细信息）

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

Answer 1

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

如果我正确理解，则应该可以使用以下路由配置来实现所需的目标：

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子句。

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

1 个答案: