Angular2 - 根路由上的子路由，命名插座不工作

Question

我有以下路由配置：

export const ROUTES: Routes = [
{ path: '',
component: MainComponent,
children: [
{
path: 'hero-video',
component: HeroOverlayComponent,
outlet: 'overlay'
}
]
}
];
export const appRouting = RouterModule.forRoot(ROUTES);

这个想法是我有一个组件，它有一个覆盖路由出口，该出口在该主页上显示不同的出口。但是这不起作用，我总是收到没有此类路由的错误。

如果我卸下插座部分(当然还要更新选择器)，一切正常。

export const ROUTES: Routes = [
{ path: '',
component: MainComponent,
children: [
{
path: 'hero-video',
component: HeroOverlayComponent
}
]
}
];
export const appRouting = RouterModule.forRoot(ROUTES);

我是否错过了某些内容，或者如果我是否对根路由使用命名路由器插座，行为会有所不同？

Answer 1

路由配置看起来不错。似乎Angular在导出路由器的方式方面存在问题。 我建议改变你为RouterModule服务的方式。

我会创建AppRoutingModule然后将其导入主AppModule而不是按照自己的方式进行操作。

const ROUTES: Route[] = [
{ path: '',
component: MainComponent,
children: [
{
path: 'hero-video',
component: HeroOverlayComponent,
outlet: 'overlay'
}
]
}
];
@NgModule({
imports: [RouterModule.forRoot(ROUTES)],
exports: [RouterModule],
})
export class AppRoutingModule {}

然后在你的app.module.ts

@NgModule({
imports: [
// your imports here
AppRoutingModule
],
// rest of your configuration here
})
export class AppModule {}