Блог

Главная - Вопросы по программированию - Как предоставить несколько выходов маршрутизатора в шаблоне с одинаковым путем?

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

#angular #angular-routing

#angular #angular-маршрутизация

Вопрос:

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

Ниже приведен мой 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 /(диаграмма:линия//диапазон:линия). Но мне нужен путь маршрутизации как
http://localhost:4200/line .

Я использовал следующие маршруты в своем приложении-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:

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

Комментарии:

1. Ваше предложение отлично работает для меня. Есть ли какой-либо способ добиться этого с помощью отдельных компонентов?