生成一个新的Component:

Angular路由开发的一个实际例子

在NgModule文件app.module.ts里,找到RouterModule.forRoot, 新增一条路由信息:

Angular路由开发的一个实际例子
Angular路由开发的一个实际例子

这条路由信息将url同Component ProductDetailsComponent关联起来。

我们期望实现的效果是,用户点击产品列表时,跳转到产品明细页面去。因此,打开product-list Component的模板,在标签a上增加路由信息:[routerLink]="[’/products’, productId]"

Angular路由开发的一个实际例子

同时,这个productId变量尚未在product list Component里声明,因此需要增添一行:index as productId:

Angular路由开发的一个实际例子

最后的效果:

点击product name超链接后:

Angular路由开发的一个实际例子

跳转到product明细页面:

Angular路由开发的一个实际例子

要获取更多Jerry的原创文章,请关注公众号"汪子熙":
Angular路由开发的一个实际例子

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-01-21
  • 2022-03-04
  • 2021-08-02
  • 2022-12-23
  • 2021-08-10
  • 2021-08-18
猜你喜欢
  • 2021-07-12
  • 2022-12-23
  • 2022-12-23
  • 2022-02-17
  • 2022-01-17
  • 2021-09-06
相关资源
相似解决方案