Angular 2 добавляет косую черту в URL с несколькими выходами маршрутизатора

Question

У меня есть компонент приложения, который имеет два выхода:

template: '<router-outlet></router-outlet><router-outlet name="popup"></router-outlet>'

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

<app-main-menu></app-main-menu>
<h1>
  {{title}}
</h1>
<div class="container">
  <router-outlet></router-outlet>
</div>

Проблема в том, что когда я перемещаю routerLink для всплывающего выхода в меню, он содержит косую черту для основного маршрута, и получающийся URL не работает. Так, например, этот routerLink:

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a>

создает URL 'localhost/mainroute(popup:login)', если он находится в компоненте приложения, и 'localhost/mainroute/(popup:login)', если он находится в компоненте меню.

В то время как первый URL работает, второй URL выдает ошибку: Ошибка: Не удается сопоставить ни один маршрут: 'mainroute'

Я не понимаю, почему это относится к двум случаям по-разному. Я также не понимаю, что даже если URL 'localhost/mainroute/' работает, второй сгенерированный URL не работает из-за косой черты.

Кто-нибудь может мне помочь?

Answer 1

Я нашел эту проблему, которая описывает точно такое же поведение. Очевидно, это было доведено до сведения разработчиков, и они считают это правильным поведением. Одно и то же выражение связи маршрутизатора может давать разные результаты в зависимости от того, где оно используется.

Предлагаемое решение заключается в использовании относительной ссылки, например:

<a [routerLink]="['../', { outlets: { popup: 'login' } }]">

или использовать абсолютную ссылку, как это:

<a [routerLink]="['/', { outlets: { popup: 'login' } }]">

В описанном здесь случае сработала абсолютная ссылка и дала правильную ссылку.

Я до сих пор не понимаю, поведение. Поэтому, если у кого-то есть хорошее объяснение этому, пожалуйста, уточните.