angular - 嵌套在主路由中时辅助路由不起作用

Question

作为我的主要路线的孩子，我无法让辅助路线工作

我基本上有两条主要出口的路线 - auth 和包含整个应用程序的第二条路线。

在该应用程序路由 (RootComponent) 内，我有另一个主路由出口，其中包含主要应用程序视图（DashboardComponent 和 TasksComponent）和一个用于应呈现辅助视图（BacklogComponent 和 ProjectsComponent）的侧边栏的辅助路由出口。我似乎无法激活辅助路线。

如果我将辅助路由移动到 app.component.ts 中第一个出口的同级，它可以工作，但这显然意味着该路由位于我的主应用程序视图之外，即 RootComponent

我还尝试在 URL 栏中导航到 /dashboard(sidebar:backlog) 和 /(dashboard//sidebar:backlog)

应用程序路由.module.ts

const routes: Routes = [
  {path: 'auth', component: AuthComponent},
  {
    path: '', component: RootComponent, children: [
      {path: 'dashboard', component: DashboardComponent},
      {path: 'tasks', component: TasksComponent},
      {path: 'backlog', component: BacklogComponent, outlet: 'sidebar'},
      {path: 'projects', component: ProjectsComponent, outlet: 'sidebar'}
    ]
  },
  {path: '**', redirectTo: ''}
];

app.component.html（应该呈现第一级。即 AuthComponent 或 RootComponent）

<a [routerLink]="['/dashboard']">dashboard</a>
<a [routerLink]="['/tasks']">tasks</a>
<a [routerLink]="[{ outlets: { sidebar: ['backlog'] } }]">backlog</a>
<a [routerLink]="[{ outlets: { sidebar: ['projects'] } }]">projects</a>
<a [routerLink]="[{ outlets: { sidebar: [] } }]">close</a>
<router-outlet></router-outlet>

root.component.html（包含主应用程序视图）

<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>

当我尝试使用以下命令路由到 Backlog 时[routerLink]="[{ outlets: { sidebar: ['backlog'] } }]"：core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'backlog'

标签： angularangular-router