Dans mon application angulaire, j'ai un composant dont les données dépendent d'un paramètre d'itinéraire. Lorsque la page ouvre la première fois que les données sont chargées correctement. Lorsque je passe à une page différente mais restez sur le même composant (alors un seul changement de paramètres d'itinéraire), les nouvelles données ne sont pas chargées.
Les routametteurs sont mis à jour et toutes les données qui sont souscrites à l'aide du tuyau ASYNC sont chargés. correctement. Il existe cependant une pièce de données qui nécessite une manipulation supplémentaire. Cette observable est souscrite dans le composant. Ceci est celui avec les données qui ne sont pas chargées à nouveau.
Dans le code ci-dessous, l'abonnement observable de Parammap intégré permet de suivre les modifications apportées aux paramètres de route et de l'exécution du rappel. la seconde observable ne pas. Je suppose que cela est dû au fait que la seconde observable est terminée et est remplacée par un nouveau qui n'est jamais abonné à (dans le rappel du poing).
Comment mieux gérer ce problème pour obtenir également les données de la Deuxième observable?
La seule chose qui semble faire fonctionner est de déplacer ce second abonnement au rappel du premier. Mais cela ne cherche pas à très nettoyer le code et je ne suis pas certain de ce qui se passerait si, pour une raison quelconque, l'observable ne complète pas au moment où il est remplacé par le nouveau.
3 Réponses :
Vous pouvez utiliser Switchmap Formulaire de commande RXJ ici comme:
Utilisez des opérateurs:
ngOnInit() {
this.observable = this.route.parent.paramMap.pipe(
map(paramMap => paramMap.get('id')),
switchMap(id => this.service.getSomething(id))
);
}
C'est la solution exacte que je travaillais avant de poster ma question mais je ne pouvais pas le faire fonctionner (Nouveau sur Observables et RxJ en général), car l'exemple que j'ai trouvé utilisait l'ancien style d'utilisation des opérateurs. Je me demande toujours comment vous désabonner correctement. Si l'observable complète ce n'est pas nécessaire, mais si cela ne va pas de vous désabonner?
@Yonuevo Vous pouvez vous désabonner quand vous le souhaitez, ce que je trouve le plus pratique consiste à utiliser le tuyau async dans le modèle. J'écris rarement un .subscribe dans mon code composant.
L'utilisation du tuyau ASYNC résoudrait le problème de désinscription, mais malheureusement, cela n'est pas possible pour cet abonnement (contrairement aux autres autres utilisés dans ce composant). Dans la plupart des cas (sinon tous) les cas de désabonnement ne sont pas nécessaires car l'observable sera terminé. Mais si cela n'a pas changé de paramètre d'itinéraire, l'ennui est à nouveau couru et une nouvelle observable est créée. L'ancien va-t-il continuer à flotter quelque part ou l'annulation de la commutation s'en occupe-t-elle?
Non, la soumission à la route restera. Utilisez des opérateurs d'arrêt de flux si vous savez combien de fois vous allez écouter ( premier , prendre (1) , etc.) ou vous désabonner dans votre ngondestroy < / code> fonction.
J'ai mal expliqué (ou compris) mal :) Je ne suis pas inquiet pour l'abonnement à la route, mais à propos de l'observable retourné de grossistes. Il est très improbable mais pas impossible que le paramètre de route change avant de compléter. Si cela se produit et que le code dans Switchmap est excumé à nouveau, il n'y a pas de nouveau observable d'être retourné de grossistes? Qu'est-ce qui arrive à l'original? est-ce que cela est annulé et désabonné automatiquement par l'opérateur de commutation ou dois-je le faire manuellement
Eh bien, je serai clair: l'itinéraire est chaud, l'appel HTTP est froid. Les observables chauds continuent d'écouter, les observables à froid sont fermés lorsqu'ils sont terminés. Switchmap annulera le froid observable si non terminé , mergemap laissera la finition observable précédente . Cela signifie que dans mon code, la demande est annulée, l'original cesse (donc no S'abonner déclenché), et comme il fait froid, vous n'avez pas besoin de vous désabonner.
Laissez-nous Continuez cette discussion en chat .
Je pouvais imaginer que vous voulez faire quelque chose comme ci-dessous (RXJS V6):
ngOnInit(): void {
this.route.parent.paramMap.pipe(
map(paramMap: ParamMap) => this.id = paramMap.get('id'),
mergeMap(id => this.service.getSomething(this.id))
)
.subscribe(
// callback that handles the processing of the data
)
}