2017-02-15 9 views
4

у меня есть компонент приложения, который имеет два выхода:Угловое 2 Добавляет косую черту URL с несколькими Outlets Router

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

я следовал примеру в this link для создания маршрутизации и 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 'локальный/mainroute (всплывающее окно: Логин)', если он будет помещен в компонент приложения и 'локальный/mainroute/(всплывающее окно: Логин)' если он помещен в компонент меню.

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

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

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

+1

Я нашел обходное решение на данный момент. Я создал функцию и ссылку, указывающую на нее. Ссылка выглядит так: ** Login ** и функция использует роутер, импортированный в конструкцию, подобный этому, чтобы получить URL-адрес без конечной косой черты: ** public openLogin(): void { this.router.navigateByUrl (this.router .url + '(popup: login)'); } ** – Martinator

ответ

1

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

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

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

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

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

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^