如何在Angular2路由器中导航到子节点的根？

Question

我的App.ts中有以下路由器：

@RouteConfig([
    {path: '/', redirectTo: ['Login']},
    {path: '/login', name: 'Login', component: LoginComponent},
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent},
    {path: '/users/...', name:'Users', component: UsersComponent}
])

在我的UsersComponent中，我定义了它的子级：

@RouteConfig([
    {path: '/addUser', name: 'Add User', component: UserAddComponent},
    {path: '/editUser', name: 'Edit User', component: UserEditComponent}
])

我的问题是：当我尝试导航到JUST /users/ ，出现以下错误：

EXCEPTION: Link "["Users"]" does not resolve to a terminal instruction. in [['Users'] in NavigationComponent@5:20]

如何仅访问用户状态（在UsersComponent中定义的html）？

Answer 1

您应该制作仅处理路由UserRoute新组件，并在App中使用它：

@RouteConfig([
    {path: '/', redirectTo: ['Login']},
    {path: '/login', name: 'Login', component: LoginComponent},
    {path: '/dashboard', name: 'Dashboard', component: DashboardComponent},
    {path: '/users/...', name:'Users', component: UsersRoute}
])

// users-route.ts
@RouteConfig([
    {path: '/', name: 'UsersRoot', component: UsersComponent, useAsDefault: true},
    {path: '/addUser', name: 'Add User', component: UserAddComponent},
    {path: '/editUser', name: 'Edit User', component: UserEditComponent}
])

您可以为用户命名根路由，因为useAsDefault选项['/Users']路由将在UsersRoot终止。

Answer 2

您需要在“ Users ”的子路由之一中设置useAsDefault: true ，或直接在链接中指定子路由

[routerLink]="['/Users', `Add User']"