在路由器插座 Angular2 中单击 *ngFor 项目答案

【问题标题】：Get clicked *ngFor item in router outlet Angular2在路由器插座 Angular2 中单击 *ngFor 项目
【发布时间】：2017-06-02 02:41:36
【问题描述】：

我有一个*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 }
];

【问题讨论】：

我完全不清楚“在我的路由器出口视图中获取单击的项目，同时隐藏其他项目”。可能意味着。您不能在 <router-outlet> 中显示某些内容，您告诉路由器导航到某个路由，而路由器会在 <router-outlet> 中显示为该路由配置的组件
我没有要显示的组件，只是一个基于 json 的 html 标签渲染。我的意思是：我有一个项目列表，当我点击一个项目时，我会被重定向到该项目的页面。但由于有一个路由器出口，我希望它只显示点击的项目，这会模仿重定向行为。但实际上它应该从视图中删除其他项目，并只留下带有所需 json 参数（例如名称、id、图像和发布年份）的单击项目。附言就像在在线商店中一样 - 您会看到商品列表，然后单击并重定向到其页面

标签： json angular routing router-outlet

【解决方案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;
    }

【讨论】：

编译器似乎不支持多次点击操作。它在“routerDisplay($event),onSelect(release)”上抛出错误，但如果只留下 onSelect，一切运行良好！
你可以像这样使用它："onSelect(($event,release)" in view, onSelect(event,release){ this.selectedRelease=release; this.routerDisplay(event); }跨度>