Перейдите на другую страницу с помощью routerlink и получите подробную информацию на основе параметра в Angular2

У меня есть список предметов на одной странице.По щелчку каждого элемента списка он должен перейти к следующему экрану, и он должен показать детали этого пертикулярного элемента. В.html-страница я делаю ссылку маршрутизатора, как это

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

В productdetails.деталь.ts файл я получаю вот так.

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

    });
    }

Здесь я получаю только ID.но я Хочу также получить все детали этого идентификатора. И product, и productdetails используют одни и те же данные json. Это мой JSON-данные.

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

                }
            ]
        }
    }
}

В productdetails.обслуживание.ts file 

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

Как достичь этого.Кто-нибудь может мне помочь?

1 2
angular2-routing

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