Question

我正在尝试通过json设置我的商品的网址。

所以我有这样的结构：

  <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时，我会得到像

这样的网址

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

我希望它看起来像

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

我没有设法在Angular2中找到一个可行的解决方案。

Answer 1

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

Answer 2

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

<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网址上看到网址的变化， http://run.plnkr.co/plunks/UyNkK9/

以下是点击发布后{@ 3}}

后网址的显示方式

在Angular2应用

2 个答案: