Angular 角度路由默认辅助路由

当我读到Angular Router的辅助路由时，它被认为是一组“独立”的路由。然而，我试图创建的是“依赖”路由。例如：

/home -> HomeComponent, WelcomeComponent
/about -> AboutComponent, SearchComponent
/products -> ProductsComponent, ProductListComponent
/pricing -> PricingComponent, WelcomeComponent

我希望能够像下面的代码那样指定主（页面）路由，并根据上面的示例加载这两个组件（AboutComponent、SearchComponent）

关于

当我使用以下工具时，我可以加载两个组件：

<a [routerLink]="[{ outlets: { primary: ['about'], sidebar: ['search'] } }]">
    Products List
</a>

产品清单

但是，我真的不想让链接知道辅助路线。我要自动供应。使用正确的配置是否可以实现这一点？或者这需要我扩展RouteModule来完成吗

编辑：

---

我必须满足的另一个要求是保持对等体相互连接。网站的布局使得第二个组件不在主组件内。

根据我的知识，您有两个选项

选项1：创建带有子组件的主管线

app.routing.ts

const routes:routes=[
{
路径：“主”，组件：HomeComponent，
子项：[{路径：“”，组件：WelcomeComponent}]，
},
{
路径：“关于”，组件：关于组件，
子项：[{路径：“”，组件：SearchComponent}]，
},
{
路径：“产品”，组件：ProductsComponent，
子项：[{路径：“”，组件：ProductListComponent}]，
},
{
路径：“定价”，组件：PricingComponent，
子项：[{路径：“”，组件：WelcomeComponent}]，
}
}];

您有您的主要组件，例如AboutComponent。 在其中，您必须放置一个

来放置您的子组件

关于.component.html

备选案文2：

您可以将子组件直接放在父组件中，但此时不能将其称为路由

关于.component.html

---

我在“无组件路由”一节中找到了答案：

下面是该链接中的代码示例：

[
  {
    path: 'team/:id',
    component: TeamParentComponent,
    children: [
      {
        path: '',
        component: TeamListComponent
      },
      {
        path: '',
        component: TeamDetailsComponent,
        outlet: 'details'
      }
    ]
  }
]

---

回答得好。不过，你的回答让我想起了我原来的问题中忘记说的话。我尝试使用辅助路线，因为我有一个大的网站布局，并希望这些不同的组件显示在非常不同的位置与。我想让这些路由器出口彼此对等，而不是封装它们。

[
  {
    path: 'team/:id',
    component: TeamParentComponent,
    children: [
      {
        path: '',
        component: TeamListComponent
      },
      {
        path: '',
        component: TeamDetailsComponent,
        outlet: 'details'
      }
    ]
  }
]