javascript - 使用子路由，但不要在 router-outlet 中渲染它们

Question

我有一段代码，其中路由器配置如下所示:

  {
    path: 'users',
    component: UsersComponent,
    children: [
      {
        path: 'add',
        component: AddUserComponent
      }
    ]
  }

我想有两个页面:

• /users - 显示用户列表
• /users/add - 显示添加新用户的表单

但我不知道要嵌套 router-outlet 标签。我想在同一个主容器中呈现这两个页面，即 app-root。我知道我可以通过以下方式做到这一点:

  {
    path: 'users',
    component: UsersComponent
  },
  {
    path: 'users/add',
    component: AddUserComponent
  }

但您可能同意我的看法，这不是一个好的解决方案，使用子构造会很好。

我该怎么做？

Answer 1

如果您没有为路由分配组件，则不需要嵌套路由 => 只是不要将组件添加到 users 路由的定义中，并创建一个专用的列表页面的空路径:

  {
    path: 'users',
    children: [
      {
        path: '',
        component: UsersComponent
      },
      {
        path: 'add',
        component: AddUserComponent
      }
    ]
  }

这里有一个缺点:如果您在 UsersComponent 中使用 routerLink，您将在其中使用相对路径，则空路径仍将表现为路径。因此，您需要使用类似于 ../add 的相对路径，而不是通常人们认为的 ./add