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

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

这是一个类似的单页工作示例 plunkr 代码：http://plnkr.co/edit/UyNkK9?p=preview， 你可以在这个 plunkr url 上看到 url 的变化， http://run.plnkr.co/plunks/UyNkK9/

这是您点击发布后网址的外观，http://run.plnkr.co/plunks/UyNkK9/releases/release-1

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