我有一系列嵌套组件
主要应用组件 - >产品 - >产品组
app-routing模块路由
const routes: Routes = [
{
path: '',
redirectTo: environment.devRedirect,
pathMatch: 'full',
canActivate: [AuthenticationGuard]
},
{
path: 'customers/:customerId/contracts/:contractId',
loadChildren: './products/products-routing.module#ProductsRoutingModule',
canActivate: [AuthenticationGuard],
data: {
breadcrumb: null,
animation: 'products'
}
}
];
我的产品路线看起来像
const routes: Routes = [
{
path: '',
component: ProductsOverviewComponent,
data: {
animation: 'overview',
breadcrumb: 'Products',
},
canActivate: [ AuthenticationGuard ],
children: [
{
path: 'products/:productId/grouping',
loadChildren: '../grouping/grouping-routing.module#GroupingRoutingModule',
data: {
breadcrumb: null,
animation: 'grouping'
},
canActivate: [ AuthenticationGuard ]
},
{
path: 'create',
component: ProductsComponent,
data: {
breadcrumb: 'Create',
animation: 'create'
},
canActivate: [ AuthenticationGuard ]
},
{
path: 'edit/:productId',
component: QuoteOptionComponent,
data: {
breadcrumb: 'Edit',
animation: 'edit' },
canActivate: [ AuthenticationGuard ]
}
]
}
];
然后在我的产品分组模块中
const routes: Routes = [
{
path: '',
component: OverviewComponent,
canActivate: [ AuthenticationGuard ],
data: {
breadcrumb: 'Grouping',
animation: 'grouping-overview',
},
children: [
{
path: 'create',
component: CreateEditComponent,
data: {
breadcrumb: 'Create',
animation: 'group-create'
},
canActivate: [ AuthenticationGuard ]
},
{
path: ':groupId/edit',
component: CreateEditComponent,
data: {
breadcrumb: 'Edit Group Info',
animation: 'group-edit'
},
canActivate: [ AuthenticationGuard ]
]
}
];
我的所有路由器链接都工作,url路径更新,路由器内的所有数据都被拉回到每个路由。我的问题是从不显示每个路由的组件。我在这里遗漏了什么或者如何让组件显示在主路由器插座中?