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 {}