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 

        }

    ]

},