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

您需要在其中一个useAsDefault: true子路由中设置Users或直接在链接中指定子路由

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

如何在Angular2路由器中导航到子项的根目录？

2 个答案: