我有一个关于第二个(命名)路由器插座的问题 . 单击链接时,路由器插座不显示该组件 .
这就是我的Routes的样子:
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
上并点击该链接时,指定的路由器插座仍为空,并且不显示该组件 .
我尝试了很多东西,但似乎无法找到问题 . 我究竟做错了什么?
1 回答
看来你还没有提到儿童组件的组件 . 我不知道你到底得到了什么错误,但这是我的输入 . 愿你可以尝试这样 .
并且您的路由器插座应该在ProjectDetailsComponent中