Question

我在以辅助路线为主要路线的孩子上班时遇到困难

基本上，我的主出口有两条路由-auth和容纳整个应用程序的第二条路由。

在该应用程序路由（RootComponent）内，我还有另一个主要路由器出口，用于容纳主应用程序视图（DashboardComponent和TasksComponent），以及用于应呈现辅助视图的边栏的aux路由出口（BacklogComponent和ProjectsComponent）。我似乎无法激活辅助路由。

如果我将aux路径移动为app.component.ts中第一个出口的同级节点，则它起作用，但这显然意味着该路径位于我的主应用程序视图即RootComponent之外

我也尝试在URL栏中导航到/ dashboard（sidebar：backlog）和/（dashboard // sidebar：backlog）

app-routing.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>

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

辅助路径嵌套在主路径中时不起作用

0 个答案: