Как отобразить дочерние маршруты названной розетки - PullRequest
Новая
       20

Как отобразить дочерние маршруты названной розетки

0 голосов
/ 30 мая 2019

Я пытаюсь отобразить дочерние маршруты указанной розетки маршрутизатора.Вот как выглядит мой код: 

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'people', children: [
    { path: '', component: PeopleComponent, outlet: 'people', pathMatch: 'full' },
    { path: '', component: OpportunitiesComponent, outlet: 'opportunities', children: [
      { path: 'test1', component: OpportunityOneComponent, outlet: 'test1' },
      { path: 'test2', component: OpportunityTwoComponent, outlet: 'test2' }
    ] }
  ] }
];

Как вы можете видеть, я хочу, чтобы PeopleComponent и OpportunitiesComponent отображались в одном шаблоне, когда пользователь посещает конечную точку / людей (я уже успешно это сделал).Если пользователь посещает / people / test1, я хочу показать OpportunityOneComponent ниже PeopleComponent и OpportunitiesComponent (как дочерний элемент OpportunitiesComponent).

Если он посещает / people / test2, я хочу показать OpportunityTwoComponent.Мне удалось правильно отобразить конечную точку / people, но каждый раз, когда я захожу в / people / test1 или / people / test2, я получаю эту ошибку: 

core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'people/test2'
Error: Cannot match any routes. URL Segment: 'people/test2'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)

Мой шаблон OpportunitiesComponent (компонент, который отображается в конечной точке /люди такие: 

<p>
    opportunities works!
</p>
<button routerLink='/people/test1'>To OpportunityOne</button>
<button routerLink='/people/test2'>To OpportunityTwo</button>
<router-outlet></router-outlet>
<router-outlet></router-outlet>
...