产业气象站|如何传递信息，Angular路由跳转时我们期望实现的场景：从productlistCom

我们期望实现的场景：从productlistComponent点击产品名称超链接时，能跳转到productdetailComponent ，显示选中的product的明细信息。
在productdetailComponent引入路由相关的library：
import{ActivatedRoute}from"@angular/router"
导入productsampledata：

文章图片
【产业气象站|如何传递信息，Angular路由跳转时】在productdetailComponent里定义一个名为product的property ，同时通过将import的ActivatedRoute添加到Component的构造函数的参数里，实现注入的目的：

文章图片
&gtTheActivatedRouteisspecifictoeachroutedcomponentthattheAngularRouterloads.Itcontainsinformationabouttheroute,itsparameters,andadditionaldataassociatedwiththeroute.
ByinjectingtheActivatedRoute,youareconfiguringthecomponenttouseaservice.
实现ngOnInit：
ngOnInit(){this.route.paramMap.subscribe(params=&gt{this.product=products[+params.get("productId")]})}
```

文章图片
&gtTherouteparameterscorrespondtothepathvariablesyoudefineintheroute.TheURLthatmatchestherouteprovidestheproductId.AngularusestheproductIdtodisplaythedetailsforeachuniqueproduct.
在productdetailComponent显示productproperty的信息：
&lth2&gtProductDetailsh2&gt
&ltdiv*ngIf="product"&gt&lth3&gt{{product.name}}&lth4&gt{{product.price|currency}}&ltp&gt{{product.description}}效果如下：

文章图片
跳转时的调试：

文章图片
跳转时选中的product的索引，通过参数productId传入到productdetailComponent里：

文章图片
【来源：汪子熙的游泳故事】
声明：转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢。邮箱地址：newmedia@xxcb.cn