EDIT: (solution)
La cause première de mon problème était qu'il y avait eu des routes supplémentaires ajoutées par programme dans l'app.component. J'ai trouvé cela en désactivant toutes les routes dans le module app-routing.module et en étant toujours mystérieusement capable de naviguer vers la route en question. Après avoir supprimé les itinéraires ajoutés par programme, tout fonctionnait comme prévu. Merci à tous pour l'aide! :-)
ORIGINAL (question):
J'utilise le code suivant dans mon composant pour m'abonner aux paramètres de l'itinéraire:
{
path: ':itemId',
component: ItemDetailsComponent,
},
Tout fonctionne bien, j'obtiens les paramètres de la route sans aucun problème.
Voici la configuration de travail de la route:
{
path: 'details/:itemId',
component: ItemDetailsComponent,
},
Passons maintenant au problème: Lorsque j'essaie de simplifier mon itinéraire (puisque je n'ai besoin d'aucune autre route), le problème suivant se pose: Après avoir apporté la simple modification suivante à la configuration de l'itinéraire, je ne peux plus accéder aux paramètres de l'itinéraire (ils sont vides).
Voici la configuration défectueuse de la route:
this.activatedRoute.params.subscribe((values) => {
console.log('these are my parameters: ', values);
});
Est-ce que quelqu'un sait, pourquoi je ne peux plus accéder au paramètre de route unique après avoir raccourci la route ?
3 Réponses :
Il semble que vous essayez toujours de naviguer vers details /: itemId alors que vous auriez dû le faire juste pour : itemId . Assurez-vous de naviguer vers le bon chemin.
Après avoir effectué la modification, / details fonctionnerait et serait considéré comme itemId . Mais / details / 1 ou tout autre chemin entraînerait une erreur.
Voici un Exemple de travail StackBlitz < / strong> pour votre référence.
votre stackblitz fonctionne! Mais cela ne fonctionne pas dans mon application ... je mets l'itinéraire à la main
@TobiasGassmann, quel itinéraire avez-vous mis? Veuillez me dire le chemin exact vers lequel vous essayez de diriger votre utilisateur.
www.example.com/123
et je ne peux pas mettre la main sur le "123"
et le bon composant est instancié, j'ai vérifié cela avec console.logs. Simplement le paramètre d'itinéraire est manquant
Pouvez-vous s'il vous plaît fourcher mon lien StackBlitz et apporter des modifications selon votre scénario afin que vous puissiez reproduire ce problème?
Je vais essayer, mais comme il semble dans stackblitz, tout fonctionne bien ...
Cela fonctionne bien. Voir le stackblitz: https://stackblitz.com/edit/angular-nqzpum
Créez un stackblitz s'il vous plaît
Il semble que je ne puisse pas reproduire mon problème local dans un stackblitz .. dans stackblitz ça marche bien .. je vais continuer à essayer
Si la configuration de l'itinéraire se trouve à l'intérieur d'un module autre que l'AppModule, vous devrez peut-être vous abonner aux paramètres du parent en utilisant this.activatedRoute.parent.params.subscribe
dans ce cas, vous n'avez pas vraiment besoin de spécifier la variable dans votre router.module qui devrait ressembler à ceci:
this.activatedRoute.params.subscribe(
(params) => {
//ItemId will be available here when url changes
console.log(params.itemId);
}
);
Ensuite, si vous avez besoin d'ouvrir un élément en particulier, utilisez le
this.router.navigate(["", {itemId: 123}]);
à condition que le routeur soit injecté en tant que Router où l'appel est effectué.
Ensuite, vous devez injecter dans votre ItemDetailsComponent enabledRoute: ActivatedRoute
{
path: '',
component: ItemDetailsComponent,
},
avez-vous essayé
/: itemId?Cela signifie-t-il que vous souhaitez associer ItemDetailsComponent à l'URL de l'itinéraire de votre application?
@Mehdi oui, exactement
@Abhishek J'ai essayé ça, mais Angular se plaint des itinéraires ne commençant pas par une barre oblique