web-dev-qa-db-fra.com

Comment router.navigate au même itinéraire dans Angular 4 et attraper le même événement?

D'accord, j'ai deux cas d'utilisation pour ma question ici:

  1. Je travaille sur une application qui a un itinéraire /en/register. Tout fonctionne bien lorsque je suis à la racine et que je clique sur un bouton qui fonctionne avec this.router.navigate([this.routeParams.lang, 'register']); et que tout va bien, cela ouvre un modal dans le constructeur (ou ngOnInit, de toute façon) avec ($('#modalRegister') as any).modal('show');.

    Tout fonctionne bien, mais si je ferme le modal, la route est toujours /en/register/ (oui, je peux le faire passer à /en mais voyez le cas d'utilisation n ° 2 avant de suggérer ceci), donc lorsque je clique sur le bouton, il ne s'affiche pas. faire n'importe quoi. Ni le constructeur ni ngOnInit ne sont appelés, même pas route.params.subscribe () ou route.url.subscribe () (ce qui, à mon avis, ils devraient ...).

  2. Dans la même application, j'ai un bouton qui fait une recherche et centre certains marqueurs dans une carte (en /en/search/blah). Tout cela est bien si je suis dans la page d'index ou si je change la requête de recherche. Cependant, si l'utilisateur fait glisser la carte ailleurs et veut que les mêmes marqueurs soient centrés à nouveau, je fais aussi this.router.navigate(['search', this.searchQuery]); et s'il finit par être le même itinéraire (cliquez deux fois sur le bouton de recherche), il ne fait rien.

Bien que je sois d’accord, c’est bien pour que les composants ne soient pas recréés si l’URL n’a pas changé, c’est une mauvaise conception, car dans UI-router, vous pouvez faire la même chose et tout ira bien (pour autant que je me souvienne) .

Ainsi, dans Angular 4, comment puis-je exécuter le même code dans le constructeur/ngOnInit du composant de la route lorsque la même URL est invoquée? ou comment détecter si l'URL est la même et agir en conséquence? (Bien que je pense toujours que c'est mauvais design, mais quand même ...).

Tout conseil est grandement appréciée. Merci!

javascriptangularroutingroutesangular-ui-router
6
Alemar

Lorsque j'ai eu besoin de "recharger" le constructeur du composant actuel et les fonctions ngOnInit, La seule solution que j'ai trouvée était une sorte de solution de contournement: 

J'ai utilisé le fait que "this.router.navigate" renvoie une promesse. J'ai donc navigué ailleurs et je suis revenu. C'est un peu moche mais ça marche et l'interface utilisateur n'est pas affectée:

this.router.navigate(..[somewhere else]..)
    .then(()=>{this.router.navigate(..back..)})

J'espère que ça aide.

7
rotemx

Pour le cas 1,

Pourquoi naviguez-vous vers un nouvel itinéraire simplement pour ouvrir un modal. Faites-le simplement sur le même itinéraire avec un appel de fonction. Si vous souhaitez passer à un nouvel itinéraire, vous pouvez à nouveau appeler this.router.navigate("/") dans l’événement de fermeture modale. 

Pour le cas 2, J'espère que cela fonctionnera.

currentSearchQuery: string;

ngOnInit() {
  this.route.paramMap
    .switchMap((params: ParamMap) => {
        this.currentSearchQuery = params.get('searchQuery');
        updateMarkers();
      });

}
3
Dulaj Atapattu

Ajoutez simplement un paramètre factice à la fin de la route/fr/register/jk2h4-42hj-234n2-234dfg ou un paramètre de requête tel que/en/register? Val = jk2h4-42hj-234n2-234dfg

changez la valeur du paramètre lorsque vous appelez le même itinéraire. Le navigateur sait donc que le changement d’URL et le composant Angualr commencent à fonctionner à partir du cycle de vie complet.

0
kamprasad

j'utilise cette solution de contournement 

this.router.navigate(['path']).then(()=>  {window.location.reload();});
0
FlyingTurtle