Angular2 - 根路由上的子路由，命名插座不起作用答案

【问题标题】：Angular2 - children routes on root route with named outlets not workingAngular2 - 根路由上的子路由，命名插座不起作用
【发布时间】：2017-08-26 18:22:22
【问题描述】：

我有以下路由配置：

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);

如果我对根路由使用命名路由器出口或不使用命名路由器出口，我是否会遗漏某些东西或为什么行为会有所不同？

【问题讨论】：

你是如何导航到“出口”路线的？
在这种情况下，您应该导航到：/(outlet:hero-video)
是的，我正在使用这样的路由器链接：` ``
检查我的答案。

标签： angular angular2-routing angular2-router

【解决方案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 {}

【讨论】：

能否为您的实现准备一个 plunker？