Angular 命名路由器出口仍为空

我有一个关于第二个（命名的）路由器出口的问题。单击链接时，路由器出口不显示组件

这就是我的路线：

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>

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

<router-outlet name="project"></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>

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

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

这就是routerLink的外观：

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>

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

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

路由

当我在

http://.../projects/456

然后单击链接，指定的路由器出口仍然为空，并且不显示组件

---

我试过很多方法，但似乎都找不到问题所在。我做错了什么？

您似乎没有提到子组件的组件。我不知道你到底得到了什么错误，但这是我的输入。你可以这样试试

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

您的路由器插座应该在ProjectDetails组件中