使用 routerlink 导航到另一个页面并根据 Angular2 中的参数获取详细信息

Question

我有一个项目列表 page.On 单击每个列表项目它应该移动到下一个屏幕并且它应该显示该特定项目的详细信息。在 .html 页面我正在做路由器 link 像这样

<div *ngFor="let data of productdata" [routerLink]="['/productdetails', data.id]">
....
</div>

在 productdetails.component.ts 文件中我是这样的。

    ngOnInit(){
private details: any;
 this.details = this.route.params.subscribe(params => {
       this.id = +params['id']; // (+) converts string 'id' to a number

    });
    }

这里我只获取 ID，但我还想获取该 ID 的所有详细信息。 product 和 productdetails 都使用相同的 json 数据。这是我的 json 数据。

{
    "response": {
    "data": {
            "products": [
                {
                    "productNumber": "123",
                    "productName": "ABC"
          },
                 {
                    "productNumber": "345",
                    "productName": "CDS"

                }
            ]
        }
    }
}

在productdetails.service.ts文件中

 loadProductsDetails(productNumber:number){
      this.productsData = this.productService.loadProducts();
      this.productdetailsdata = this.productsData.find(ob => ob.id===productNumber);
      return productdetailsdata;
   }

但是我没有得到任何数据。

this.productdetailsdata = this.productsData.find(ob => ob.id===productNumber);

如何实现this.Can有人帮帮我吗？

Answer 1

我会提供一个服务来在组件之间共享数据：

第一部分HTML

<div *ngFor="let data of productdata" (click)="redirectTo('productdetails', data)">...</div>

第一个组件 TS

redirectTo(route: string, data: any): void {
    this.mySharedService.data = data;
    this.router.navigateByUrl(`/${route}`);
}

第二分量TS

mySharedData: any;
constructor(private mySharedService: MySharedService) {

}

ngOnInit() {
    this.mySharedData = this.mySharedService.data;
}

使用 routerlink 导航到另一个页面并根据 Angular2 中的参数获取详细信息

Navigate to another page with routerlink and get details based on parameter in Angular2

angular2-routing

angular