angular - 在 Angular 2 中用 subview 替换父 View 路由器 View

Question

我有如下代码片段中给出的路由配置 -

export const projectRoutes: Routes = [
  {
    path: 'projects', component: ProjectComponent, canActivate: [AuthGuard]
  },
  {
    path: 'project/:id', component: ProjectDetailsComponent, canActivateChild: [AuthGuard],
    children: [
      { path : 'adduser', component: AddMemberComponent, canActivate: [AuthGuard]}
    ]
  }
]

这是模块定义(顺便说一句，这不是根模块，这是一个子/功能模块)-

//imports are removed to maintain sanity

@NgModule({
  imports: [
    CommonModule,
    ProjectRoutingModule
  ],
  declarations: [routableComponents],
  providers: [ProjectService]
})
export class ProjectModule { }

项目详细信息 HTML 是 -

<div *ngIf="project" class="row justify-content-md-center">
   <!-- project details here -->
</div>
<router-outlet>
</router-outlet>

现在我想在用户转到这条路线时显示添加用户表单 - /project/{id}/adduser.

由于路由 adduser 是 project/:id 的子级，因此它加载到该 HTML 下的 router-outlet 中。但是，我想替换相同的 View 而不是在已经呈现的 HTML 下显示它。就像图片中给出的一样 -

我想达到的目标-

有什么办法可以实现吗？

Answer 1

您可以考虑从子状态中删除 adduser:

export const projectRoutes: Routes = [
  {
    path: 'projects', component: ProjectComponent, canActivate: [AuthGuard]
  },
  {
    path: 'project/:id', component: ProjectDetailsComponent, canActivateChild: [AuthGuard]},

      { path : 'projects/:id/adduser', component: AddMemberComponent, canActivate: [AuthGuard]}

  }
]