Мотивация
Мне нужно несколько шаблонов макета в приложении Angular: пустой шаблон для компонентов, связанных с аутентификацией, шаблон с панелью меню для навигации по конкретному приложению и шаблон, который добавляет боковую панель к меню-бар.Было бы полезно иметь боковую панель в качестве именованного выхода маршрутизатора.
Вот демонстрация / упрощение проблемы: предполагая, что TwoOutletsComponent имеет <router-outlet name="seconde" /> именованный маршрутизатор, я хотел бы эту ссылку: /two/one(second:forsecond)чтобы загрузить мой TwoOutletsComponent, загрузите некоторый контент в безымянный маршрутизатор, затем загрузите /forsecond во «второй» названный маршрутизатор-выход.При активации этой ссылки DOM должен логически выглядеть примерно так:
<AppComponent>
<AppComponent's router-outlet>
<TwoOutletsComponent>
<router-outlet named="sidebar>[content from /forsecond]</router-outlet>
<router-outlet>[content from /two/one]</router-outlet>
<TwoOutletsComponent>
Учитывая приведенное выше логическое представление, я могу получить содержимое /two/one, которое прекрасно загружается в неназванный выход-маршрутизатор, носодержимое из /forsecond не отображается;В консоли не отображаются ошибки, и включение трассировки маршрутизатора показывает, что маршрут /forsecond разрешен очень хорошо.
Если бы с другой стороны, я бы поставил <router-outlet name="second" /> в AppComponent, тогда /forsecondгруз просто отлично - просто не там, где я хочу!Логическое представление в этом случае будет выглядеть примерно так:
<AppComponent> / <-- this gets loaded by default
<AppComponent's router-outlet>
<TwoOutletsComponent>
<router-outlet>[content from /two/one]</router-outlet>
<TwoOutletsComponent>
<AppComponent's second router-outlet>[content from /foresecond]</router-outlet>
Мои соответствующие маршруты будут выглядеть так:
const routes: Routes = [
{ ... other routes not included },
{
path: "two", component: TwoOutletsComponent,
children: [
{ path: "one", component: PlainTextComponent }
]
},
{
path: "forsecond",
pathMatch: "full",
component: PlainTextComponent,
outlet: "second"
}
]
То, что я думаю, происходит:
Я думаю, что Angular Router обрабатывает все маршруты, включая вторичные, без контекста.Если это так, имеет смысл поискать «второй» маршрутизатор-розетку в шаблоне AppComponent.Я надеялся каким-то образом сообщить маршрутизатору, что целевой выход маршрутизатора находится в шаблоне TwoOutletsComponent, а не в шаблоне AppComponent.
В своих попытках подключить маршрутизатор я пытался имитироватьМаршрут использовался для основного содержимого по порядку, но результат был тем же, содержимое не показывалось:
Я настроил Stackblitz, чтобы надеюсь прояснить это: ссылка на Stackblitz