这可能是一个常见的问题，如果有更好的答案，请指向我。
在顶层，我正在开发的角度应用程序公开了一个登录路径和路径到 4 个单独的仪表板，具体取决于谁登录。
对于每个仪表板,我都有一个或多或少相同的侧面导航 (某些选项仅针对某些类型的用户显示)。在仪表板中,我有一个嵌套的路由器插座。每当我尝试在嵌套插座内加载模块时,Angular 都无法匹配路径。以下是我到目前为止所拥有的:
app-routing.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) },
];
admin-routing.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 / employee）中的嵌套路由器中呈现内容
当在 (2) 中加载的模块内访问其他路由时，应在员工详细信息页面的该模块（例如，admin / employee /:id）的出口内呈现该路由，其中，employee 模块具有嵌套路由器
如果我将孩子从管理路由中移出并使他们成为独立的路由，它的工作原理，但是，内容呈现在最外面的（应用程序）路由器出口和 sidenav 不呈现。
任何帮助或建议将不胜感激。
让我们把这个问题分解成一个小问题：
应用模块.ts
const routes: Routes = [
{
path: '',
// pathMatch: 'full',
children: [
{
path: 'foo',
component: FooComponent
},
],
},
{
path: '**',
component: NotFoundComponent,
}
];
app.component.html
<router-outlet></router-outlet>
<on routerLink="/foo">go to foo</on>
如果我们点击按钮，Angular Router 将安排一个路由转换，这涉及到一个非常有趣的过程，它由多个阶段组成。
其中一个阶段称为应用重定向，它是解决重定向的地方以及NoMatch错误的来源。这也是我们可以找到有关pathMatch: 'full'的更多信息的地方。
在此阶段中，它将遍历每个配置对象，并尝试找到与发布的 URL 匹配的第一个对象（例如2）。
它将首先遇到这个（它发生在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，在这种情况下，segments 是['foo']。因此，我们将得到matched: false，这意味着FooComponent不会出现在视图中。
如果您需要为不同的模块使用不同的 UI，则可以通过在 app-routing.module.ts 中定义父组件来实现。
app-routing.module.ts.
const routes: Routes = [
{
path: '',
component: AdminComponent, //you can set different UI like navigation/header
children: [
{ path: '',redirectTo: 'dashboard',pathMatch: 'full'}, //set default redirect
{ path: 'dashboard', loadChildren: () =>import('./../dashboard/dashboard.module').then(m => m.DashboardModule) },
{ 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) },
]
},
{
path: '',
component: AuthComponent, //different UI for child components, without navigation
children: [
{ path: 'maintenance',loadChildren: () => import('./../maintenance/maintenance.module').then(m => m.MaintenanceModule) },
{ path: 'login',loadChildren () => import('./../authentication/authentication.module').then(m => m.AuthenticationModule) },
{ path: 'landing',loadChildren: () => import('./../landing/landing.module').then(m => m.LandingModule) }
]
}
您的子模块，例如：admin / employee /：id 将呈现父 UI（例如：AdminComponent），
本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（54条）