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

Question

我的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只是孩子们的路由器插座。

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

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

路由结构应该是什么，为了拥有产品列表的父亲，以及具有产品细节的孩子？

将ProductsComponent和ProductDetail都设置为UserComponent的子项解决问题，但在我的痕迹中创建一个丑陋的结构（主页>用户>列表和主页>用户>详细信息）

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

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