recargar - rutas angular 6

¿Navegando por la misma ruta sin refrescar el componente?

Question

Me actualicé para usar el nuevo enrutador Angular 2 del enrutador, en desuso y se modificó el comportamiento.

La página con la que tengo problemas es una página de búsqueda. Elegimos colocar todos los términos de búsqueda en la URL utilizando HashLocationStrategy . Las rutas se ven así:

const routes: RouterConfig = [
  { path: '''', component: HomeComponent },
  { path: ''search/:term/:cat/:page/:sort/:size/:more'', component: HomeComponent },
  { path: ''search/:term/:cat/:page/:sort/:size'', component: HomeComponent },
  { path: ''search/:term/:cat/:page/:sort'', component: HomeComponent },
  { path: ''search/:term/:cat/:page'', component: HomeComponent },
  { path: ''search/:term/:cat'', component: HomeComponent },
  { path: ''search/:term'', component: HomeComponent },
  { path: ''details/:accountNumber'', component: DetailsComponent }
];

Sé que un enfoque de cadena de consulta podría ser más adecuado para todas estas opciones, pero los requisitos del proyecto decididos por otras personas ...

De todos modos si navego a localhost/#/search/Hello usando this.router.navigate([''/search/Hello'']); entonces el enrutador funciona bien y todo es genial. Mientras estoy en esa página si trato de this.router.navigate([''/search/World'']); a continuación, la URL en la barra de direcciones del navegador se actualizará en consecuencia, pero el componente no cambia en absoluto.

Anteriormente podía usar el routerCanReuse para indicar que quería reutilizar el componente de búsqueda y que routerOnReuse volvería a ejecutar la búsqueda cuando ocurriera la navegación. No veo equivalentes a estos en @angular/router . ¿Cómo puedo volver a cargar la ruta actual con nuevos parámetros de URL?

Estoy ejecutando la versión 2.0.0-rc.3 para Angular 2 y 3.0.0-alpha.8 de @ angular / enrutador.

Answer 1

Si solo el parámetro tiene cambios, el componente en sí no se inicializará nuevamente. Pero puede suscribirse a cambios en los parámetros que envía.

Por ejemplo, en el método ngOnInit puedes hacer algo como esto:

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       const term = params[''term''];
       this.service.get(term).then(result => { console.log(result); });
     });
  }