命名路由器插座仍为空

Question

我有一个关于第二个（命名）router-outlet的问题。点击链接时，路由器插座不显示组件。

这是我的路线是什么样子：

const appRoutes: Routes = [ 
    { path: '', redirectTo: '/projects', pathMatch: 'full' }, 
    { 
    path: 'projects', children: [ 
     { path: '', component: ProjectsComponent }, 
     { path: ':projectId', children: [ 
      { path: '', component: ProjectDetailsComponent }, 
      { path: 'routes', component: RoutesComponent, outlet: 'project' }, 
      { path: 'rides/new', component: AddRideComponent, outlet: 'project' }, 
      { path: 'routes/:id', component: RideDetailsComponent, outlet: 'project' }, 
      { path: 'stops', component: StopsComponent, outlet: 'project' }, 
      { path: 'stops/new', component: AddStopComponent, outlet: 'project' }, 
      { path: 'stops/:id', component: StopDetailsComponent, outlet: 'project' } 
     ] 
     }, 
    ] 
    }, 
    ... 
]; 

这是我命名的路由器出口的样子：

<router-outlet name="project"></router-outlet> 

这是routerLink的样子：

<a [routerLink]="['/projects', projectId, { outlets: {project: 'routes'}}]">Routes</a> 

当我在http://.../projects/456上并点击链接时，指定的router-outlet保持空白，并且d没有显示组件。

我已经尝试了很多东西，但似乎无法找到问题。我究竟做错了什么？

Answer 1

看来你还没有提到儿童组件的组件。我不知道你得到了什么错误，但这是我的投入。你可以试试这个。

export const appRoutes: Routes = [ 
    { path: '', redirectTo: 'projects', pathMatch: 'full' }, 
    { path: 'projects', component: ProjectsComponent }, 
    { path: 'projects/:projectId', component: ProjectDetailsComponent, 
    children: [ 
     { path: 'routes', component: RoutesComponent, outlet: 'project' }, 
     { path: 'rides/new', component: AddRideComponent, outlet: 'project' }, 
     { path: 'routes/:id', component: RideDetailsComponent, outlet: 'project' }, 
     { path: 'stops', component: StopsComponent, outlet: 'project' }, 
     { path: 'stops/new', component: AddStopComponent, outlet: 'project' }, 
     { path: 'stops/:id', component: StopDetailsComponent, outlet: 'project' } 
    ] 
    } 
]; 

和路由器，电源插座应安装在ProjectDetailsComponent

<router-outlet name="project"></router-outlet>