Abonnez-vous à la fois la route params et queryParams Angulaire 2
J'ai mis en place les éléments suivants système de routage
export const MyRoutes: Routes = [
{path: '', redirectTo: 'new', pathMatch: 'full'},
{path: ':type', component: MyComponent}
];
et système de navigation
goToPage('new');
goToPageNo('new', 2);
goToPage(type) {
this.router.navigate([type]);
}
goToPageNo(type, pageNo) {
this.router.navigate([type], {queryParams: {page: pageNo}});
}
Échantillon URL ressemble à ceci
Parfois, ils ont facultatif queryParams (page)
Maintenant, j'ai besoin de lire les deux paramètre de route et queryParams
ngOnInit(): void {
this.paramsSubscription = this.route.params.subscribe((param: any) => {
this.type = param['type'];
this.querySubscription = this.route.queryParams.subscribe((queryParam: any) => {
this.page = queryParam['page'];
if (this.page)
this.goToPageNo(this.type, this.page);
else
this.goToPage(this.type);
});
});
}
ngOnDestroy(): void {
this.paramsSubscription.unsubscribe();
this.querySubscription.unsubscribe();
}
Maintenant, cela ne fonctionne pas comme prévu, en visitant les pages sans queryParams fonctionne, puis je visite une page avec queryParams "goToPageNo" est appelée plusieurs fois, comme je m'abonne queryParams à l'intérieur de la route params.
J'ai regardé à l'angle de 2 documentation, ils n'ont pas d'exemple ou les codes d'un abonnement à deux paramètre de route et queryParams est mis en œuvre en même temps.
Toute façon de le faire correctement? Des suggestions?
Vous devez vous connecter pour publier un commentaire.
J'ai réussi à obtenir un abonnement unique à la fois la queryParams et les Params par la combinaison des observables en utilisant
Observable.combineLatest
avant de vous inscrire.Par exemple.
Angulaire 6+
Où
xxx
est de votre itinéraire{path: 'post/:xxx', component: MyComponent},
import { combineLatest } from 'rxjs';
etimport { map } from 'rxjs/operators';
Réponse tardive, mais une autre solution :
Plutôt que de souscrire à la params et queryparams-je m'abonner à la NavigationEnd événement sur le routeur. Déclenche qu'une seule fois et les deux params et queryparams sont disponibles sur le snapshot : (exemple angulaire 4)
Concernant la désinscription : oui, c'est vrai routage params, queryParams de navigation ou d'événements les abonnements sont automatiquement désabonné par le routeur, il y a toutefois une exception : si votre itinéraire a des enfants , lors de la navigation entre les enfants, pas de vous désabonner de se produire. Uniquement lorsque vous naviguez à partir de la route parente!
E. g. J'ai eu une situation avec des onglets de l'enfant routes. Dans le constructeur de premier onglet composant l'abonnement sur la route params pour récupérer des données. Chaque fois que je navigue entre la première et la deuxième onglet et à l'arrière d'un autre abonnement a été ajoutée résultant de la multiplication du nombre de demandes.
Utilisation
ActivatedRouteSnapshot
de votreActivatedRoute
ActivatedRouteSnapshot
interface aparams
etqueryParams
de la propriété, et vous pourriez obtenir à la fois de la valeur en même temps.Edit : Que l'OP a déclaré, nous ne recevons que la valeur initiale des paramètres avec cette technique.
Exemple Plunker
zip
à la fois, vous n'exécuteronNext
lorsque les deux d'entre eux émettent, c'est pourquoicombineLatest
serait un meilleur choix de l'opérateur.Je pense que vous devriez utiliser zip opérateur https://www.learnrxjs.io/operators/combination/zip.html
Parce que si vous utilisez combineLatest et modifier des url params ou requête de paramètres que vous avez obtenu la valeur avec la nouvelle requête params et ancienne url params.
Url par exemple:
http://localhost/1?value=10
http://localhost/2?value=20
http://localhost/3?value=30
Une alternative (sur Angulaire 7+) est de s'inscrire à la ActivatedRoute url observables et utiliser "withLatestFrom" pour obtenir les dernières paramsMap et queryParamsMap. Il semble que les paramètres sont réglés avant l'url observables émet:
https://rxjs-dev.firebaseapp.com/api/operators/withLatestFrom
https://angular.io/api/router/ActivatedRoute