Question

我正在尝试显示已命名路由器出口的子路由。这是我的代码：

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' }
    ] }
  ] }
];

如您所见，当用户访问/ people端点时，我希望PeopleComponent和OpportunitiesComponent显示在同一模板中（我已经成功完成了此操作）。如果用户访问/ people / test1，我想在PeopleComponent和OpportunitiesComponent下面显示OpportunityOneComponent（作为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模板（在端点/ people处显示的组件是这样的：

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

如何显示已命名路由器出口的子路由

0 个答案: