javascript - sref - ¿Cómo router.navigate a la misma ruta en Angular 4 y atrapa el mismo evento?

ui sref angularjs example

Question

De acuerdo, tengo dos casos de uso para mi pregunta aquí:

1. Estoy trabajando en una aplicación que tiene una ruta /en/register . Todo funciona bien cuando estoy en la raíz y hago clic en un botón que hace this.router.navigate([this.routeParams.lang, ''register'']); y está todo bien, esto abre un modal en el constructor (o ngOnInit, de todos modos) con ($(''#modalRegister'') as any).modal(''show''); .

   Todo funciona bien, pero si cierro el modal, la ruta sigue siendo /en/register/ (sí, puedo hacer que vaya a /en pero vea el caso de uso n. ° 2 antes de sugerir esto), así que cuando hago clic en el botón no hace nada Ni el constructor ni ngOnInit se están llamando, ni siquiera route.params.subscribe () o route.url.subscribe () (que creo que deberían ...).

2. En la misma aplicación, tengo un botón que hace una búsqueda y centra algunos marcadores en un mapa (in /en/search/blah ). Eso está bien si estoy en la página de índice o si cambio la consulta de búsqueda. Sin embargo, si el usuario arrastra el mapa a otra parte y quiere que los mismos marcadores se vuelvan a centrar, también hago esto. this.router.navigate([''search'', this.searchQuery]); y si termina siendo la misma ruta (haga clic en el botón de búsqueda dos veces, por ejemplo) no hace nada.

Aunque estoy de acuerdo en que es bueno para que los componentes no se vuelvan a crear si la URL no ha cambiado, este es un mal diseño porque en el enrutador UI podría hacer lo mismo y funcionaría (hasta donde recuerdo) .

Entonces, en Angular 4, ¿cómo ejecuto el mismo código en el constructor / ngOnInit del componente de la ruta cuando se le dice a la misma URL que se navegue? o ¿cómo puedo detectar si la URL es la misma y actuar en consecuencia? (Aunque todavía creo que es un mal diseño, pero de todos modos ...).

Cualquier consejo es muy apreciado. ¡Gracias!

Answer 1

Para el caso 1,

¿Por qué navegas a una nueva ruta solo para abrir un modal? Solo hazlo en la misma ruta con una llamada a función. Si desea pasar a una nueva ruta, puede volver a llamar a this.router.navigate("/") en el evento de cierre modal.

Para el caso 2, espero que esto funcione.

currentSearchQuery: string;

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

}

Answer 2

Encontré el mismo problema en uno de mis proyectos, cuando necesitaba "volver a cargar" las funciones constructor y ngOnInit del componente actual.

La única solución que encontré fue una especie de solución: utilicé el hecho de que "this.router.navigate" devuelve una promesa. Así que navegué en otro lugar, y regresé. Es un poco feo pero funciona y la interfaz de usuario no se ve afectada:

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

Espero eso ayude.

Answer 3

Simplemente agregue el parámetro ficticio al final de la ruta / en / register / jk2h4-42hj-234n2-234dfg o consulte el parámetro como / en / register? Val = jk2h4-42hj-234n2-234dfg

cambie el valor del parámetro cuando llame a la misma ruta. De modo que el navegador sabe que el cambio de URL y el componente Angualr comienzan a funcionar a partir del ciclo de vida completo.