Получить clicked * ngFor элемент в розетке маршрутизатора Angular2

Question

У меня есть *ngFor сгенерированный список, в котором каждый элемент отображен с json.

Что я хочу - это получить щелкнутый элемент в моем router-outlet виде, скрывая другие предметы.

Подумайте об этом как о продукте, так и в карточке продукта. Когда вы нажимаете на определенный элемент, вы перенаправляетесь на полную страницу этого продукта. Итак, мне нужен тот же подход.

Теперь по щелчку я получаю нужный URL. Поэтому мне не нужно устанавливать специальный URL-адрес для отображения router-outlet, просто отрисуйте нажатый элемент.

Моя *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; 
    }