如何在具有相同路径的模板中提供多个路由器出口？

Question

我在一个组件中使用了两个路由器插座。路由导航对我来说很好。但是我想适当地给出路由路径。现在，我面临着意外的路由路径。

以下是我的 app.component.html

<h2>Details </h2>
<ul>
  <li>
    <a [routerLink]="[{ outlets: { chart: 'line',range: 'line' } }]"> Line </a>
  </li>
  <li>
    <a [routerLink]="[{ outlets: { chart: ['area'], range: ['area'] } }]">Area</a>
  </li>
</ul>

<div class="row">
  <div class="column">
    <router-outlet name='chart'></router-outlet>
  </div>
  <div class="column">
    <router-outlet name="range"></router-outlet>
  </div>
</div>

现在我得到的路由路径为 http://localhost:4200/(chart:line//range:line) 。但是我需要一个路由路径 http://localhost:4200/line 。

我在 app-routing.module.ts

中使用了以下路由

const routes: Routes = [
  {
    path: 'line',
    component: LineChartComponent,
    outlet: 'chart'
  },
  {
    path: 'line',
    component: LineRangeComponent,
    outlet: 'range'
  },
  {
    path: 'area',
    component: AreaChartComponent,
    outlet: 'chart'
  },
  {
    path: 'area',
    component: AreaRangeComponent,
    outlet: 'range'
  }
];

有人可以建议我如何实现预期的路由路径吗？

谢谢。

Answer 1

我建议您将2个插座合并为1个，并创建包装器组件以同时包含这两个组件（范围和图表），并在路由器配置中使用该包装器组件。