Как сделать вложеный router-outlet в Angular 2?

Question

[Coder321]

Нужно сделать что то типа этого


То есть, рутовский компонент иметь только router-outlet, следующий же "First template" должен будет иметь свой сайдбар и тело, в теле еще один router-outlet. "first" и "second" должны переключаться в теле "first template". Вопрос в том, как такое сделать? Если делать без промежуточного компонента "first template" то проблем ни каких не возникает, а если с ним то не знаю как.

Роуты для "First Parent" и его потомков "first" и "second" прописываю как то так.

const routes: Routes = [
  {
    path: '',
    component: FirstParentComponent,
    children: [
      {
        path: '',
        component: FirstComponent
      },
      {
        path: 'second',
        component: SecondComponent
      }
    ]
  }
];
export const Routing: ModuleWithProviders = RouterModule.forChild(routes);

Как прописать роуты для "First Template"?

Буду благодарен за помощь)

Comments

[Алексей Зуев]

А в чем проблема? Ошибки вылезают?

[Coder321]

Алексей Зуев: Отредактировал вопрос, так должна быть понятние суть. На все что я пытался сделать мне выдавала "template syntax error" что то типа "'router-outlet' is not a known element"

Answer 1

[Алексей Зуев]

Может я не так понял смысл задачи, но попробуйте посмотреть этот пример

https://plnkr.co/edit/bvk28mqXwfbg8YaZPzCD?p=preview

Лучше нажать на просмотр в отдельном окне, чтобы четко видеть урлы



Дочерние роуты можно вынести в Routing модули и загружать асинхронно.

Comments

[Coder321]

Не совсем так, First template должен быть как бы прослойкой задающей шаблон, а не родителем для всех остальных. Такое вообще реально сделать?)

[Алексей Зуев]

Coder321: По вашей картинке он родитель

[Coder321]

Алексей Зуев: то есть мне по любому нужно делать его родителем, а все остальные детьми? Нельзя его сделать просто прослойкой? Что бы он как и root-app не имел своего url. Грубо говоря, сделать копию root-app на уровень выше.

[Илья Трифонов]

Coder321, если вопрос еще актуальный могу выслать вам рабочий код. Реализовывал такую же штуку.

[Coder321]

Илья Трифонов, Спасибо, вродь разобрался уже