在Angular2应用中替换URL中的分号、id和等号

Question

我正在尝试设置通过json获取的项目的URL。

所以我有一个这样的结构：

  <div class="releases-component">
     <div *ngFor="let release of releases" [routerLink]="['/releases', { id:release.id }]">
      <img src="{{release.image}}" alt="Image release">
      <h3>{{release.name}}</h3>
      <span>{{release.year}}</span> 
     </div>
    </div>

我的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: 'distro', component: DistroComponent },
  { path: 'contacts', component: ContactsComponent }
];

问题是，当我单击任何*ngFor生成的div时，我得到的url如下

http://localhost:3000/releases;id=release-1

我想让它看起来像

http://localhost:3000/releases/release-1

对我来说，在Angular2中没有找到一个有效的解决方案。

Answer 1

上面的代码中几乎没有语法上的小错误，下面是修复后的代码。结构：

<div class="releases-component">
     <div *ngFor="let release of releases" [routerLink]="['/releases',release.id ]">
      <img src="{{release.image}}" alt="Image release">
      <h3>{{release.name}}</h3>
      <span>{{release.year}}</span> 
     </div>
    </div>

路由器：

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

下面是一个只有一页的类似的工作示例：http://plnkr.co/edit/UyNkK9?p=preview，您可以在这个http://run.plnkr.co/plunks/UyNkK9/上看到url的变化

以下是单击releases，http://run.plnkr.co/plunks/UyNkK9/releases/release-1后url的外观

Answer 2

html：

<div class="releases-component">
  <div *ngFor="let release of releases"
  (click)=onSelect(release)>
    <img src="{{release.image}}" alt="Image release">
    <h3>{{release.name}}</h3>
    <span>{{release.year}}</span>
  </div
</div>

路由：

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

组件：

import {Router} from '@angular/router';
...
...

constructor(private router: Router) {}

onSelect(release): any {
  this.router.navigate(['/release', release.id]);
}