Question

当我了解Angular Router的辅助路由时，它被认为是“独立”的一组路由。但是，我正在尝试创建“依赖”路由。例如：

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

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

<a routerLink="/about">About</a>

使用以下代码可以加载两个组件：

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

但是，我真的不希望链接知道辅助路线。我希望它自动提供。正确的配置是否可行？还是需要我扩展RouteModule来做到这一点？

编辑：

我必须满足的另一个要求是保持对等方彼此之间的联系。该站点的布局应使第二部分不在主要部分之内。

Answer 1

我最终在“无组件路由”部分下找到了答案：https://vsavkin.tumblr.com/post/146722301646/angular-router-empty-paths-componentless-routes

这是该链接中的代码示例：

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

Answer 2

根据我的知识，您有2个选择。

选项1：使用子组件创建主路线

app.routing.ts

<router-outlet>

您有自己的主要组成部分，例如AboutComponent。在其中，您必须放置一个 <router-outlet></router-outlet> 来放置子组件。

about.component.html

<!-- code of your component -->
<app-search-component></app-search-component>
<!-- code of your component -->

选项2：

您将子组件直接放置在父组件中，但是此时您无法调用该路由。

about.component.html

{{1}}

角路线默认辅助路线

2 个答案: