Как обеспечить несколько выходов маршрутизатора в шаблоне с одинаковым путем? - PullRequest
Новая
       2

Как обеспечить несколько выходов маршрутизатора в шаблоне с одинаковым путем?

1 голос
/ 20 марта 2019

Я использовал два роутера-розетки в компоненте. Навигация по маршрутизации у меня работает нормально. Но я хочу правильно указать путь маршрутизации. Теперь я сталкиваюсь с неожиданным путем маршрутизации.

Вот мой 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'
  }
];

Может кто-нибудь подсказать мне, как я могу достичь ожидаемого пути маршрутизации?

Заранее спасибо.

1 Ответ

1 голос
/ 20 марта 2019

Я рекомендую объединить 2 выхода в 1. И создать компонент-оболочку, содержащий оба компонента (диапазон и диаграмму), и использовать вместо этого этот компонент-оболочку в конфигурации маршрутизатора.

...