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

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

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>

Проблема в том, что когда я перемещаю routerLinks для всплывающего окна в меню, оно содержит завершающую косую черту для основного маршрута, и результирующий 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-адрес не работает из-за косой черты в конце.

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


angular routes router-outlet routerlink trailing-slash
person Martinator    schedule 15.02.2017    source источник
comment
Я нашел обходной путь на данный момент. Я создал функцию и ссылку, указывающую на нее. Ссылка выглядит следующим образом: ‹a (click)=openLogin() style=cursor: pointer;›Login‹/a›, и функция использует маршрутизатор, импортированный в такой конструкции, чтобы получить URL-адрес без косая черта в конце: public openLogin(): void { this.router.navigateByUrl(this.router.url + '(popup:login)');   -  person Martinator    schedule 16.02.2017

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

или использовать абсолютную ссылку следующим образом:

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

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

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

person Martinator    schedule 16.02.2017