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