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