クリックしてください* ngルータ出口のアイテムAngular2

Question

私は*ngForの各アイテムがjsonからレンダリングされたリストを生成しました。

私が欲しいのは、私のrouter-outletの中のクリックしたアイテムを見て、他のアイテムを隠すことです。

商品リストと製品カードのことを考えてください。特定の商品をクリックすると、その商品の全ページにリダイレクトされました。だから、私は同じアプローチが必要です。

クリックすると、必要なURLが取得されます。だから私はrouter-outletビューのための特別なURLを設定する必要はありません、ちょうどそこにクリックされたアイテムをレンダリングします。

マイ*ngFor構造：

<div class="releases-component"> 
    <div class="release" 
    *ngFor="let release of releases" 
    (click)="routerDisplay($event)"> 

     <img src="{{release.image}}" 
     alt="Release image" 
     [routerLink]="['/releases', release.id ]"> 

     <h3 class="release--name" 
     [routerLink]="['/releases', release.id ]">{{release.name}}</h3> 

     <span class="release--year" 
     [routerLink]="['/releases', release.id ]">{{release.year}}</span> 
    </div> 

    <div class="release--view"> 
     <router-outlet>{{ The Clicked Item! }}</router-outlet> 
    </div> 
</div> 

マイサービス：

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

import 'rxjs/add/operator/map'; 

@Injectable() 
export class ReleasesService { 

    constructor(private http: Http) { 

    } 


    getReleases() { 
     return this.http.request('./allReleases.json') 
     .map(res => res.json()); 
    } 

    getData(res: Response){ 

    } 

    getReleaseInfo(){ 

    } 
} 

マイjson：

[ 
    { 
     "id":"release-1", 
     "name": "Release1 name", 
     "image": "./cover1.jpg", 
     "year": "2014" 
    }, 
    { 
     "id":"release-2", 
     "name": "Release2 name", 
     "image": "./release2.jpg", 
     "year": "2015" 
    } 
] 

そして、私のルート：

const routes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'releases', component: ReleasesComponent }, 
    { path: 'releases/:id', component: ReleasesComponent }, 
    { path: 'distro', component: DistroComponent }, 
    { path: 'contacts', component: ContactsComponent } 
]; 

Answer 1

 <div class="releases-component"> 
      <div class="release" 
      *ngFor="let release of releases" 
      (click)="routerDisplay($event),onSelect(release)"> 

       <img src="{{release.image}}" 
       alt="Release image" 
       [routerLink]="['/releases', release.id ]"> 

       <h3 class="release--name" 
       [routerLink]="['/releases', release.id ]">{{release.name}}</h3> 

       <span class="release--year" 
       [routerLink]="['/releases', release.id ]">{{release.year}}</span> 
      </div> 

      <div class="release--view" *ngIf="selectedRelease"> 
      <label>id: {{selectedRelease.id}}</label><br/> 
      <label>name: {{selectedRelease.id}}</label><br/> 
      <label>year : {{selectedRelease.year}}</label><br/> 
      </div> 
     </div> 

In you controller: 
onSelect(release){ 
this.selectedRelease=release; 
    }