Angular Route 默认辅助路由答案

【问题标题】：Angular Route Default Auxiliary RoutesAngular Route 默认辅助路由
【发布时间】：2023-03-19 04:21:01
【问题描述】：

当我读到 Angular 路由器的辅助路由时，它被讨论为“独立”的一组路由。但是，我正在尝试创建“依赖”路线。例如：

/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 才能做到这一点？

编辑：

我必须做到的另一个要求是保持对等点彼此之间。网站的布局使得第二个组件不在主要组件内。

【问题讨论】：

标签： angular angular-routing angular-router

【解决方案1】：

据我所知，您有 2 个选项。

选项 1：创建带有子组件的主路由

app.routing.ts

const routes: Routes = [
  {
   path: 'home', component: HomeComponent,
   children: [{ path: '', component: WelcomeComponent }],
  },
  {
   path: 'about', component: AboutComponent,
   children: [{ path: '', component: SearchComponent }],
  },
  {
   path: 'products ', component: ProductsComponent,
   children: [{ path: '', component: ProductListComponent }],
  },
  {
   path: 'pricing  ', component: PricingComponent,
   children: [{ path: '', component: WelcomeComponent }],
  }
}];

你有你的主要组件，例如关于组件。在其中，您必须放置一个<router-outlet> 来放置您的子组件。

关于.component.html

<!-- code of your component -->
<router-outlet></router-outlet>
<!-- code of your component -->

选项 2：

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

关于.component.html

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

【讨论】：

好答案。不过，您的回答让我想起了我在原来的问题中忘记说的话。我正在尝试使用辅助路由，因为我的站点布局很大，并且希望这些不同的组件出现在非常不同的位置。我想让这些路由器插座相互对等，而不是封装它们。

【解决方案2】：

我最终在题为“无组件路由”的部分下找到了我的答案：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'
      }
    ]
  }
]

【讨论】：