routerlinkを持つ別のページに移動し、パラメータに基づく詳細をAngular2で取得

Question

1つのページに項目のリストがあります。各リスト項目をクリックすると、次の画面に移動し、その項目の詳細が表示されます。 productdetails.component.tsが、私はこのようになっていますファイルに.htmlをページで は、私はこの

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

のようなルータのリンクをしています。

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

    }); 
    } 

はここで私はまた、そのIDのすべての詳細を取得したい.butだけIDを取得ています。 製品と製品の両方のデータが同じjsonデータを使用しています。 これは私のjsonデータです。 productdetails.service.tsで

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

       } 
      ] 
     } 
    } 
} 

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; 
}