在Angular中的命名插座中导航无效。为什么？

Question

在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)。

我该如何解决？

UPDATE

这里是我的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>

Answer 1

您的模板是否包含未命名的路由器插座？我最近遇到了同样的麻烦，对我来说，它很有效，因为我只是在我的应用程序组件中添加了默认路由器出口