0

*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 }
];
4

1 に答える 1

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;
    }
于 2017-01-18T06:29:07.407 に答える