一个组件中的多个路由 Angular 2

Question

假设有一个组件-UsersComponent，它有两个方法：getAlUsers()和getUser(id)。在 @RouteConfig 中我们只能使用组件的一个名称（构造函数将被称为 default ），但我们无法指定必须调用哪种方法 class 。是否可以这样定义：

{
    path: '/users/',
    component: UsersComponent,
    name: 'Users'
},
{
    path: '/users/getAllUsers',
    component: UsersComponent.getAllUsers,
    name: 'GetAllUsers'
},
{
    path: '/users/getUser',
    component: UsersComponent.getUser,
    name: 'GetUsers'
}

或者是无法制作手段Angular2？

Answer 1

这是组件嵌套和使用子组件执行不同操作（如 "user list" 和 "user details"）的一个非常常见的用例。这个想法是使用非常细粒度的组件和非常集中的用例。如果您有通用代码（例如通过 http 加载数据），请考虑将此逻辑移至所有组件都使用的服务中。

您可以通过在顶级组件路由中使用“...”符号引用 "UserComponent" 来实现此目的。然后在这个 "UserComponent" 中定义另一个路由，其中包含 / 和 /:id 的两个配置，这样您就可以引用两个子组件 "user list" 和 "user details".

父路由配置：

  {
    path: '/users/...',
    name: 'Users',
    component: UserComponent
  }

UserComponent 中的路由配置：

@RouteConfig([
  { path: "/", name: "User List", component: UserListComponent, useAsDefault: true },
  { path: "/:id", name: "User Detail", component: UserDetailComponent },
])

一个组件中的多个路由 Angular 2

Several routes in one component Angular 2

javascript

angularjs

angular-routing

angular-ui-router