如何在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']"