Angular4 - 子路由触发时隐藏父路由的组件

Question

需求是这样的：

假设我有如下路由配置文件：

  {
    path: 'user',
    component: UserListComponent
    children: [
      {
        path: ':id',
        component: UserDetailComponent
      }
    ]
  }

一开始path为'/user', 渲染出所有的用户（用户列表）， 然后点击某一个用户， 路由跳转到'/user/2', 此时显示id为2的用户的详细信息，但是这个时候用户列表是应该隐藏起来的。

这样的需求怎么实现？

Answer 1

UserDetailComponent 组件应该和UserListComponent是同一级，而不是他的子组件，共用同一个router-outlet。
路由应该这么配置：

{
    path: 'user',
    component: UserListComponent
}，
   
{    path: ':id',
     component: UserDetailComponent 
 }

Answer 2

可以这样，做一个无组件路由
{

    path: 'user',
    children: [
        {
            path: '',
            component: UserListComponent
        },
        {
            path: ':id',
            component: UserDetailComponent 
        }
    ]
},

Answer 3

user组件加个插座outlet