Навигация в именованной розетке в Angular не работает. Почему?
Вот ошибка:
NavigationStart(id: 3, url: '/(sidebar-outlet:login/(sidebar-outlet:account-creation)//header-info-outlet:empty)')
...
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'
Error: Cannot match any routes. URL Segment: 'login'
at ApplyRedirects.noMatchError (router.js:4396)
Вот мои настройки маршрутов:
const routes: Routes = [
{ path: "empty", component: EmptyComponent },
{ path: "", component: HomeComponent },
{ path: "empty", component: EmptyComponent, outlet: Outlets.sidebar },
{ path: "login", component: LoginComponent, outlet: Outlets.sidebar },
{
path: "account-creation",
component: CreateAccountComponent,
outlet: Outlets.sidebar
},
{ path: "menu", component: MainMenuComponent, outlet: Outlets.sidebar },
{ path: "empty", component: EmptyComponent, outlet: Outlets.headerInfo },
{
path: "header-info",
component: HeaderInfoComponent,
outlet: Outlets.headerInfo
}
];
Вот Outlets
:
export const Outlets = {
sidebar: "sidebar-outlet",
headerInfo: "header-info-outlet"
};
Вот routerLink
, при нажатии на который возникает ошибка:
[routerLink]= "[{ outlets: { 'sidebar-outlet': ['account-creation']}}]"
Вот предпоследнее состояние роутера:
/(sidebar-outlet:login//header-info-outlet:empty)
Вот ожидаемое конечное состояние маршрутизатора в случае, если ошибка будет исправлена:
/(sidebar-outlet:account-creation//header-info-outlet:empty)
Я очень смущен, и после двух дней поиска ответа я не смог его найти. По такому routerLink
(особенно 'sidebar-outlet': ['account-creation']
) я ожидаю, что маршрут после клика будет /(sidebar-outlet:account-creation//header-info-outlet:empty)
, но он пытается стать /(sidebar-outlet:login/(sidebar-outlet:account-creation)//header-info-outlet:empty)
, как мы видим в ошибке.
Как я могу это исправить?
ОБНОВЛЕНИЕ
Вот мой app.component.html
(только показанная ниже часть содержит router-outlet
, в шаблонах моего проекта нет других мест, где я бы использовал router-outlet
):
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block"
rel="stylesheet"
/>
<div class="mat-app-background">
<mat-toolbar class="main-toolbar" color="primary">>
<router-outlet name="header-info-outlet"></router-outlet>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav
position="end"
mode="over"
class="sidebar-container">
<router-outlet name="sidebar-outlet"></router-outlet>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
[routerLink]="['/login']"
- person Rick   schedule 24.05.2020router-outlet
`ами. Я хотел бы, чтобы навигация в представлениях была независимой друг от друга. Итак, маршрут/login
подходит для выхода без названия. Но проблема, описанная в вопросе, касается исключительно навигации по именованным выходам. И в таком случае навигация к/login
не влияет на какой-либо именованный выход, и это сбивает меня с толку. Не могли бы вы уточнить, пожалуйста? - person manymanymore   schedule 24.05.2020