Question

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

<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的所有详细信息。产品和产品细节都使用相同的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);

如何实现这一点。任何人都可以帮助我吗？

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中的参数获取详细信息

1 个答案: