J'essaie de définir des URL pour mes éléments obtenus via json

J'ai donc une structure comme ça:

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

Et j'ai json de type:

[
    {
      "id":"release-1",
      "name": "Release1 name",
      "image": "./cover1.jpg",
      "year": "2014"
    },
    {
      "id":"release-2",
      "name": "Release2 name",
      "image": "./release2.jpg",
      "year": "2015"
    }
]

Mon routeur:

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

Le problème est que lorsque je clique sur une div *ngFor générée, j'obtiens une URL du type

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

Et je veux que ça ressemble

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

Je n'ai pas réussi à trouver une solution fonctionnelle dans Angular2 pour moi.

1
Alexandr Belov 16 janv. 2017 à 21:37

2 réponses

Meilleure réponse

Il y a quelques petites erreurs de syntaxe dans le code ci-dessus, voici le code avec les correctifs. Structure:

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

Routeur:

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

Voici un exemple de code plunkr similaire d'une page: http://plnkr.co/edit/UyNkK9 ? p = aperçu, vous pouvez voir les changements d'URL sur cette URL plunkr, http://run.plnkr.co/plunks/UyNkK9/

Voici à quoi ressemblera l'url une fois que vous aurez cliqué sur les versions, http: // run .plnkr.co / plunks / UyNkK9 / releases / release-1

1
Siddharth Sharma 16 janv. 2017 à 19:46

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>

Itinéraires:

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

Composante:

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

constructor(private router: Router) {}

onSelect(release): any {
  this.router.navigate(['/release', release.id]);
} 
1
Adeeb basheer 16 janv. 2017 à 19:17