angular - Angular中的嵌套路由

Question

这可能是一个常见问题，如果有更好的答案，请指出我。说了这么多，问题来了:
在顶层，我正在开发的 Angular 应用程序公开了一个登录路径和 4 个独立仪表板的路径，具体取决于谁登录。这部分按预期工作。
对于每个仪表板，我都有一个或多或少相同的侧导航(某些选项仅针对某些类型的用户显示)。在仪表板中，我有一个嵌套的路由器 socket 。每当我尝试在嵌套 socket 中加载模块时，Angular 都无法匹配路径。这是我到目前为止所拥有的:
应用程序路由.module.ts

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'login' },
  { path: 'login', loadChildren: () => import('./modules/auth/auth.module').then(m => m.AuthModule) },
  //{ path: 'dashboard', loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule) }
  { path: 'admin', loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule) },
];

管理员路由.module.ts

const routes: Routes = [
  { path: '', pathMatch: 'full', component: AdminComponent, children: [
    { path: 'employee', loadChildren: () => import('./../employee/employee.module').then(m => m.EmployeeModule) },
    { path: 'attendance', loadChildren: () => import('./../attendance/attendance.module').then(m => m.AttendanceModule) },
    { path: 'customer', loadChildren: () => import('./../customer/customer.module').then(m => m.CustomerModule) },
    { path: 'order', loadChildren: () => import('./../order/order.module').then(m => m.OrderModule) },
    { path: 'expense', loadChildren: () => import('./../expense/expense.module').then(m => m.ExpenseModule) },
  ]},
];

app.component.html

<router-outlet></router-outlet>

admin.component.html

<mat-drawer-container mode="side" id="dashboard-drawer-container" hasBackdrop="false">
  <mat-drawer #drawer id="sidenav-container">
    <app-sidenav></app-sidenav>
  </mat-drawer>
  <div id="dashboard-container">
    <router-outlet></router-outlet>
  </div>
</mat-drawer-container>

现在预期的行为如下:

当导航到/admin 时，将呈现 AdminComponent 并且 sidenav 将可见

当点击sidenav上的链接时，内容应该呈现在admin组件中的嵌套路由器中(例如admin/employee)

当在 (2) 中加载的模块内访问其他路由时，应在该模块的导出(例如，admin/employee/:id)内呈现员工详细信息页面，其中员工模块具有嵌套路由器

我尝试使用命名的网点，但它一直在抛出错误。如果我将 child 从管理路由中移出并使它们成为独立的路由，它会起作用，但是内容会呈现在最外面的(应用程序)路由器导出上，并且不会呈现 sidenav。
任何帮助或建议将不胜感激。

Answer 1

让我们把问题分解成一个小问题:
app.module.ts

const routes: Routes = [
  {
    path: '',
    // pathMatch: 'full',
    children: [
      {
        path: 'foo',
        component: FooComponent
      },
    ],
  },
  {
    path: '**',
    component: NotFoundComponent,
  }
];

app.component.html

<router-outlet></router-outlet>

<button routerLink="/foo">go to foo</button>

ng-run demo .

如果我们点击该按钮，Angular 路由器将调度 路线转换 .这涉及一个由多个阶段组成的非常有趣的过程。
这些阶段之一是称为应用重定向的阶段，它是解决重定向的位置以及 NoMatch 的位置。错误来自。这也是我们可以找到更多关于 pathMatch: 'full' 的地方。 .
在这个阶段，它将经过每个 配置对象并将尝试找到与发布的 url 匹配的第一个(例如 /foo )。
它将首先遇到这个(它发生在 matchSegmentAgainstRoute ):

{
  path: '',
  // pathMatch: 'full',
  children: [
    {
      path: 'foo',
      component: FooComponent
    },
  ],
},

然后， match 函数将被调用:

const {matched, consumedSegments, lastChild} = match(rawSegmentGroup, route, segments);

在这里，我们停在 route.path === '' :

if (route.path === '') {
  if ((route.pathMatch === 'full') && (segmentGroup.hasChildren() || segments.length > 0)) {
    return {matched: false, consumedSegments: [], lastChild: 0, positionalParamSegments: {}};
  }

  return {matched: true, consumedSegments: [], lastChild: 0, positionalParamSegments: {}};
}

所以，这是一种情况，pathMatch选项有所作为。使用当前配置(pathMatch 未设置)，

return {matched: true, consumedSegments: [], lastChild: 0, positionalParamSegments: {}};

将到达，然后它将继续通过children大批。因此，在这种情况下，FooComponent将成功显示。
但是，如果我们有 pathMatch: 'full' , 那么表达式

if ((route.pathMatch === 'full') && (segmentGroup.hasChildren() || segments.length > 0)) { }

将是 true , 因为 segments.length > 0 ，在这种情况下，段是 ['foo'] .所以，我们会得到 matched: false ，这意味着 FooComponent不会出现在 View 中。