web-dev-qa-db-fra.com

Angular 4 - Route activée avec param

J'ai une page de liste et une page de détail. La sélection d'un élément dans la page de liste mènera à la page de détails. 

module de routage:

const itemRoutes: Routes = [
    { path: 'item', component: ItemListComponent},
    { path: 'item/:id', component: ItemDetailComponent  }
];

composant de liste:

constructor( private route: ActivatedRoute, private router: Router) {}

goToDetail(item) {
    this.router.navigate(['item'], {id: item.id});
}

Problème: La sélection d’un élément va dans l’URL suivante: http: // localhost: 3000/item/2

Mais le navigateur affiche l'erreur "Introuvable".

Sur la console, je vois ceci:

:3000/item/2:1 GET http://localhost:3000/item/2 404 (Not Found)
Navigated to http://localhost:3000/item/2

Qu'est-ce que je fais mal? 

angularparametersrouter
3
Jay

Je pense que le problème était que j'avais ceci sur le HTML pour la page de liste:

<a href="item/{{item.id}}">{{item.id}}</a>

Je l'ai changé pour:

<a [routerLink]="['/item', item.id]">{{item.id}}</a>

et enlevé ceci du composant:

goToDetail(item) {
    this.router.navigate(['item'], {id: item.id});
}

Cela a fonctionné!

12
Jay

Vos itinéraires sont bien définis. Mais vous disposez de 3 méthodes de base pour rediriger vos messages: href, routerLink et router.navigate.

La propriété href classique dans une balise d'ancrage HTML

Celui-ci est en dehors du contrôle Angular. Dans le modèle (fichier html) de votre composant Item _ ​​Liste, vous pouvez ajouter la balise HTML d'ancrage simple:

<a href="...an static url..">Text of this link</a>

Mais, comme cette méthode est en dehors du contrôle de Angular, vous devriez peut-être utiliser cette solution pour les URL statiques externes perdurables. Comme une page Google, une page Facebook, etc. 

Donc, dans ce scénario: l'utilisateur interagit avec votre DOM et celui-ci déclenchera un événement qui obligera votre navigateur à vous rediriger.

Utilisation de l'attribut routerLink

Cette solution nécessite le RouterModule importé d'une manière ou d'une autre sur votre ngModule pour fonctionner. Le moyen le plus simple de faire cela, dans votre module principal (Communément app.module.ts), vous devriez avoir besoin d'ajouter:

import { RouterModule } from '@angular/router';

Et ajoutez RouterModule à l'intérieur du tableau imports dans votre décorateur @NgModule.

@NgModule({
  ...,
  imports: [
    ....,
    RouterModule,
    ....
  ],
  ...
})

Ensuite, dans le template de votre ItemListComponent, vous pouvez faire référence à un chemin static ou en générer un dynamiquement.

Pour référencer un chemin statique, il vous suffit d'ajouter le routerLinkattribut avec votre chemin en tant que valeur:

<... routerLink="/item">If you click this element, you will be redirected to ItemListComponent</...>

Remarque: <...></...> signifie que la balise que vous utilisez n'a aucune importance si elle est restituée dans votre page.

Pour référencer un lien généré, par exemple model/item/4, vous devez ajouter le routerLinkattribut en tant que input (Entre []) et un tableau de chemin segments contenant chaque segment dans un ordre sequencial:

<... [routerLink]="['/model', 'item', item.id]">...</...>

Etre item un objet accessible sur votre modèle (variable publique à l'intérieur du composant de classe OU une variable déclarée dans le modèle comme avec *ngFor="let item of items") avec un id comme propriété .

Note: Vous pouvez simplifier ce lien en utilisant [routerLink]="['/model/item', item.id]", car /model/item est statique dans l'URL.

Donc, dans ce scénario: l'utilisateur interagit avec votre DOM, votre DOM appellera le RouterModule, et ce dernier finira par chercher une correspondance dans vos itinéraires en faisant Angular pour vous rediriger.

En utilisant la méthode, naviguez depuis la classe Router.

Cette solution en plus _ ​​requiert le routeurimporté et injecté dans le composant que vous voulez gérer la route (ItemListComponent dans ce cas - ItemList.component.ts).

Pour importer le routeur, ajoutez ceci:

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

L'injecter; ajoutez-le au constructeur:

constructor(private router: Router) {}

Ajoutez ensuite la méthode que vous voulez gérer la redirection dans votre classe, comme celle que vous avez ajoutée:

goToDetail(item) {
    this.router.navigate(['/item', item.id]);
}

Enfin, vous devez ajouter dans votre template un événement qui appellera votre fonction. Par exemple:

<... (click)="goToDetail(item)">...</...>

Donc, dans ce scénario: l'utilisateur interagit avec votre DOM, ce dernier déclenche un événement qui déclenchera une méthode sur votre classe qui appellera la méthode naviguer à partir de la classe Router, qui finissez par chercher une correspondance dans vos itinéraires en faisant Angular} _ vous rediriger.

2
Francute

Vous pouvez utiliser trois types de paramètres différents avec Angular: les paramètres required, optional et query.

Pour gérer les identifiants sur une page de détail comme dans votre exemple, vous souhaiterez probablement utiliser les paramètres required.

Votre configuration pour les paramètres required est correcte.

Mais votre navigation vers le paramètre utilise la syntaxe de paramètre optional.

Changez le en:

this.router.navigate(['item', item.id]);

Les paramètres Required doivent être définis dans le tableau.

Pour une discussion détaillée des trois types de paramètres, consultez ce cours Pluralsight: https://app.pluralsight.com/library/courses/angular-routing

0
DeborahK

s'il vous plaît, essayez celui-la:

this.router.navigate (['item' + item.id]);

0
Kinnera Reddy