Почему не отображается шаблон компонента?

Question

[zlodiak]

Я сделал 3 странички и роутинг. Подскажите пожалуйста почему после того как я кликаю по пункту 'catalog' отображается шаблон компонента home, а не шаблон компонента catalog?

LIVE DEMO

Мой роутинг выглядит так:

RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent,
      children: [
        {
          path: 'catalog',
          component: CatalogViewComponent           
        }
      ]
      },
      { path: '**', redirectTo: 'login' }
    ])

Answer 1

[Дмитрий Лузанов]

Вы указали, что у home есть потомок catalog, и хотите, чтобы этот каталог появился вместо родителя (т.е. home). Так это не работает. Вам нужно в шаблоне home добавить <router-outlet></router-outlet> для его потомков.

Component({
  selector: 'home',
  template: `
    <div>
      <h1>Home</h1>
      <h3>Total users: # {{users?.length}}</h3>
    </div>

    <router-outlet></router-outlet>
  `
})

Либо наверное вот так, если пытаться следовать вашей задумке:

RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent,
      // children: [
      //   {
      //     path: 'catalog',
      //     component: CatalogViewComponent           
      //   }
      // ]
      },
      { path: 'home/catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])

Но это чот не очень красиво получается :с