1
votes

Angular 8 - Abonnement de processus de route lors de la navigation vers le même chemin de route

Je reçois des notifications d'itinéraire d'une application back-end, pour charger des composants angulaires. Exemple:

// Current route "/example1/path1"
let route = "/example1/path1"; //route received from back-end (SAME ROUTE PATH)
this.router.navigate([route]); // NOK: route notification not received in subscription

De plus, dans chaque composant, je traite des notifications d'itinéraire dans un abonnement:

this.route.params.subscribe(params => {
...
            }
        });

Néanmoins, j'ai des difficultés à naviguez vers le même composant sur certaines routes reçues, disons:

// Current route "/example1/path1"
let route = "/example2/path1"; //route received from back-end
this.router.navigate([route]); // OK: navigates to component associated to "/example2/path1" path

Ma question est la suivante: existe-t-il un moyen de recevoir cette notification lors de l'abonnement lorsque l'application doit accéder au même route? Les paramètres de requête seraient une solution valable pour moi ex.: "/ Example1 / path1? Timestamp = 1234567", mais je ne sais pas comment pourrais-je analyser "timestamp" et "path1" séparément sans créer une méthode d'analyse séparée ...

J'apprécierais toute sorte d'aide ou de suggestion à ce sujet.

typescript angular angular-routing routes angular-router

0 commentaires

3 Réponses :

1
votes

Voir https://angular.io/guide/router#getting-route- informations

import {ActivatedRoute} from "@angular/router";

constructor(private route: ActivatedRoute) {} 

ngOnInit() {
 // "/example1/path1?timestamp=1234567"
  this.route.params.subscribe(params => {
    this.timestamp = params['timestamp'];
  });
}

this.router.navigate(["/example1/path1"],{timestamp: 1234567});

3 commentaires

il ne reçoit pas de notification après this.router.navigate (["/ example1 / path1? timestamp = 1234567"]);

essayez que this.router.navigate (["/ example1 / path1"], {timestamp: 1234567}); plus d'infos dans angular.io/guide/router#specifying-a-relative-route @AlbertoBricio

Désolé mais, après avoir exécuté this.router.navigate (["/ example1 / path1"], {timestamp: 1234567}) ;, avec des valeurs d'horodatage différentes lorsque l'utilisateur est dans le même chemin de route, l'abonnement this.route.queryParams n'est pas notifié

1
votes

Vous pouvez utiliser

let route = "/example1/path1"; //route received from back-end (SAME ROUTE PATH)
if (route==this.router.url)
  this.initialize("path1")
else
   this.router.navigate([route]);

Mais en général, vous devriez éviter de "recharger toutes les applications". Voilà, utilisez une fonction auxiliaire et appelez en abonnement ou autre

this.route.params.subscribe(params => {
    this.initialize(params)
})

initialize(param){
  ..what ever..
}

Ensuite,

  window.location.href = path

2 commentaires

comment pourrais-je initialiser un composant depuis le début de initialize (route) {}? Existe-t-il un moyen de recharger un composant sans this.router.navigate?

que voulez-vous faire lorsque vous "rechargez un composant"? S'il ne s'agit que d'afficher de nouvelles données, vous n'avez besoin que d'actualiser les données en .ts. Vraiment, je ne pense pas que vous vouliez ngDestroy et ngCreate à nouveau le composant

0
votes

Enfin, cette solution a été valable à cet effet:

this.route.fragment.subscribe(data => {
})

Pour vous abonner aux paramètres de la chaîne de requête en utilisant ActivatedRoute :

this.route.queryParams.subscribe(data => {
})

0 commentaires