Angular 4 - 带参数的激活路线

Question

我有一个列表页面和一个详细信息页面.从列表页面中选择项目将路由到详细信息页面.

路由模块:

const itemRoutes: Routes = [
    { path: 'item', component: ItemListComponent},
    { path: 'item/:id', component: ItemDetailComponent  }
];

列表组件:

constructor( private route: ActivatedRoute, private router: Router) {}

goToDetail(item) {
    this.router.navigate(['item'], {id: item.id});
}

问题:选择项目会转到此URL: http:// localhost:3000/item/2

但浏览器显示"未找到"错误.

在控制台上,我看到了这个:

:3000/item/2:1 GET http://localhost:3000/item/2 404 (Not Found)
Navigated to http://localhost:3000/item/2

我究竟做错了什么？

Answer 1

我认为问题是我在列表页面的html上有这个:

<a href="item/{{item.id}}">{{item.id}}</a>

我改成了:

<a [routerLink]="['/item', item.id]">{{item.id}}</a>

并从组件中删除它:

goToDetail(item) {
    this.router.navigate(['item'], {id: item.id});
}

这有效!