json - 在路由器插座 Angular2 中单击 *ngFor 项目

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