Angular2路由：/ users / new作为/ users /：id处理

Question

目前我有2个组件：UsersComponent和UserComponent。

路由配置是这样的：

{ path: 'users', component: UsersComponent },
{ path: 'users/:id', component: UserComponent }

哪个工作正常。但是当我添加：

{ path: 'users/new', component: NewUserComponent }

它由'users /：id'条目处理，因此调用UserComponent组件。

如何让'users / new'来调用NewUserComponent组件？

Answer 1

非常简单：

{ path: 'users', component: UsersComponent },
{ path: 'users/new', component: NewUserComponent },
{ path: 'users/:id', component: UserComponent }

你必须先把最“精确”的路径放在首位。

Answer 2

改变他们的地方。您的路由按顺序读取，如果找到匹配的路由，则可以正常工作。因此，像users/new这样的每次调用被认为是users/，id设置为new。

{ path: 'users', component: UsersComponent },
{ path: 'users/new', component: NewUserComponent },
{ path: 'users/:id', component: UserComponent }