Angular2 - дочерние маршруты на корневом маршруте с именованными выходами не работают

У меня есть следующая конфигурация маршрутизации:

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

Я что-то упустил или почему поведение отличается, если я использую именованный выход маршрутизатора или нет для корневых маршрутов?


angular angular2-routing angular2-router
person dom    schedule 26.08.2017    source источник
comment
Как вы ориентируетесь на выходной маршрут?   -  person Michał Pietraszko    schedule 26.08.2017
comment
В этом случае вам следует перейти к: /(outlet:hero-video)   -  person Michał Pietraszko    schedule 26.08.2017
comment
да, я использую ссылку на маршрутизатор следующим образом: `‹a [routerLink]=[{outles: {overlay: ['hero-video'] } }] queryParamsHandling=preserve›``   -  person dom    schedule 26.08.2017
comment
Проверьте мой ответ.   -  person Michał Pietraszko    schedule 26.08.2017

Ответы (1)


arrow_upward
0
arrow_downward

Конфигурация маршрута выглядит нормально. Кажется, у 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 {}
person Michał Pietraszko    schedule 26.08.2017
comment
Не могли бы вы подготовить плункер с вашей реализацией, пожалуйста? - person Michał Pietraszko; 29.08.2017