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

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 个。并创建包装器组件以包含两个组件（Range 和 Chart），然后在路由器配置中使用该包装器组件。

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

How to provide multiple router outlet in a template with same path?

angular-routing

angular