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         }    ]},