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

我正在尝试为通过

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>

我的路由器：

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中为我找到有效的解决方案。

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>

组成部分：

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

constructor(private router: Router) {}

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

---

上面的代码中很少有小的语法错误，下面是修复代码。 结构：

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

下面是一个一页的类似工作示例plunkr代码：， 您可以在此plunkr url上看到url更改，

---

以下是url在您单击releases后的显示方式，

创建到

releases/:id

的路径，而不仅仅是

releases

@Adeebbasheer，然后console抛出错误：无法匹配任何路由。URL段：'releases/releases/%3Aid；id=release-1'尝试此

[routerLink]=“['/releases/'+release.id]”

类似错误-错误：无法匹配任何路由。URL段：“releases”控制台引发错误：无法匹配任何路由。URL段：'releases/release-1'至少它将错误更改为正确的外观）将尝试获取我所做错误的事情Thanx！主要的一点似乎是，我还需要将{path:'releases/:id'，component:ReleasesComponent}与{path:'releases'，component:ReleasesComponent}一起包含进去，这样就行了！

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

constructor(private router: Router) {}

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

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