Json 为路由器出口角2中的项目单击*NG2

我有一个

*ngFor

生成的列表，其中每个项目都是从

json

呈现的

我想要的是在我的

路由器出口

视图中获取单击的项目，同时隐藏其他项目

可以将其视为产品列表和产品卡。当您单击特定项目时，您将重定向到该项目产品的完整页面。所以，我需要同样的方法

现在点击我得到所需的网址。因此，我不需要为

路由器出口

视图设置特殊的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>

My

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

{{release.name}
{{release.year}
id:{{selectedRelease.id}}

名称：{{selectedRelease.id}}

年份：{{selectedRelease.year}}

在您的控制器中：
onSelect（发布）{
这个。selectedRelease=release；
}

我完全不清楚“在我的路由器出口视图中获取单击的项目，同时隐藏其他项目”可能意味着什么。您不能在

中显示某些内容，而是告诉路由器导航到某个路由，路由器在

中显示为该路由配置的组件。我没有要显示的组件，只是基于json的html标记呈现。我的意思是：我有一个项目列表，当我点击一个项目时，我会被重定向到该项目的页面。但由于有一个路由器出口，我希望它只显示点击的项目，这将模拟重定向行为。但实际上，它应该从视图中删除其他项目，只留下单击的项目，其中包含所需的json参数，如名称、id、图像和发布年份。另外，就像在线商店一样，你看到一个商品列表，点击并重定向到它的页面。编译器似乎不支持多次点击操作。它在“routerDisplay（$event）、onSelect（release）”上抛出一个错误，但如果只保留onSelect，那么一切都会运行良好！您可以像在视图中使用“onSelect（$event，release）”一样使用它，onSelect（event，release）{this.selectedRelease=release；this.routerDisplay（event）；}

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'releases', component: ReleasesComponent },
  { path: 'releases/:id', component: ReleasesComponent },
  { path: 'distro', component: DistroComponent },
  { path: 'contacts', component: ContactsComponent }
];

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