No se puede volver a cargar / actualizar la ruta activa

Recientemente me actualicé al nuevo RC3 y Router3alpha y parece que algunas cosas han cambiado.

Noté que un clic en el enlace de una ruta activa ya no da como resultado que el componente se vuelva a cargar. ¿Cómo logro este comportamiento con el nuevo enrutador3?

Mi enlace parece

Link1 

Y para probar simplemente usé un número al azar en ngOnInit:

 export class LinkoneComponent implements OnInit { public foo: number; constructor() {} ngOnInit() { this.foo = Math.floor(Math.random() * 100) + 1; } } 

Funciona muy bien al cambiar entre rutas, pero al hacer clic en la ruta activa actualmente no se produce una recarga del componente.

Esto no es compatible actualmente. Si solo cambian los valores de los parámetros pero la ruta permanece igual, el componente no se vuelve a crear.

Ver también https://github.com/angular/angular/issues/9811

Puede suscribirse a params para recibir notificaciones cuando los parámetros cambien para reinicializar la instancia del componente.

Ver también https://stackoverflow.com/a/38560010/217408

Corte de recarga de ruta actual 2-4 angular

Para mí, usar este método funciona:

 onRefresh() { this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;}; let currentUrl = this.router.url + '?'; this.router.navigateByUrl(currentUrl) .then(() => { this.router.navigated = false; this.router.navigate([this.router.url]); }); } 

Puede adjuntar este método a un evento de clic en el componente actual para volver a cargarlo.

Para Angular 2 rc7 – enrutador 3.0

Cambiar la URL base en index.html a

A partir de Angular 5.1 esto ahora se puede hacer utilizando la opción de configuración onSameUrlNavigation como parte del enrutador angular incorporado. Es bastante sencillo configurarlo y ponerlo en marcha, aunque no es obvio en la documentación.

Lo primero que tendrá que hacer es establecer la opción dentro de su app.routing.ts si tiene uno o el archivo donde está configurado su enrutamiento de la aplicación.

Hay dos valores posibles para onSameUrlNavigation 'reload' o false . El valor predeterminado es false que no provoca que suceda nada cuando se le pide al enrutador que navegue a la ruta activa. Queremos establecer este valor para reload a reload . Vale la pena señalar que la reload realidad no hace el trabajo de volver a cargar la ruta, solo vuelve a activar los eventos en el enrutador en los que necesitamos engancharnos.

 @NgModule({ imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})], exports: [RouterModule], }) 

Para determinar cuándo se dispararon esos eventos, debe especificar la opción de configuración runGuardsAndResolvers en su ruta. Esto puede tomar tres valores …

paramsChange : solo dispara cuando los parámetros de la ruta han cambiado, por ejemplo, donde cambia la identificación en /user/:id

paramsOrQueryParamsChange – se paramsOrQueryParamsChange cuando cambia un paramsOrQueryParamsChange ruta o cambia un parámetro de consulta. por ejemplo, el cambio de propiedad id o the limit en /user/:id/invites?limit=10

always – Disparar siempre cuando se navega la ruta

Queremos especificar siempre en este caso. Una ruta de ejemplo se muestra a continuación.

 export const routes: Routes = [ { path: 'invites', component: InviteComponent, children: [ { path: '', loadChildren: './pages/invites/invites.module#InvitesModule', }, ], canActivate: [AuthenticationGuard], runGuardsAndResolvers: 'always', } ] 

Ese es su enrutador configurado. El siguiente paso es manejar los eventos dentro de uno de sus componentes. Tendrá que importar el enrutador a su componente y luego conectarlo a los eventos. En este ejemplo, me he enganchado en el evento NavigationEnd que se activa una vez que el enrutador ha completado su navegación de una ruta a la siguiente. Debido a la forma en que hemos configurado la aplicación, ahora se activará incluso si intenta navegar a la ruta actual.

 export class InviteComponent implements OnInit { constructor( // ... your declarations here private router: Router, ) { // subscribe to the router events this.router.events.subscribe((e: any) => { // If it is a NavigationEnd event re-initalise the component if (e instanceof NavigationEnd) { this.initialiseInvites(); } }); } initialiseInvites() { // Set default values and re-fetch any data you need. } } 

El levantamiento pesado va al método initialiseInvites() , aquí es donde restablece las propiedades a sus valores predeterminados y recupera los datos de los servicios para que el componente vuelva a su estado inicial.

Debe repetir este patrón en cada componente que desee volver a cargar al hacer clic o actualizar a través de algún botón de actualización, asegurándose de agregar la opción runGuardsAndResolvers a cada ruta en el archivo de enrutamiento.

Este es el mejor truco que he podido solucionar para este problema tan molesto:

  var currentUrl = this.router.url; var refreshUrl = currentUrl.indexOf('someRoute') > -1 ? '/someOtherRoute' : '/someRoute'; this.router.navigateByUrl(refreshUrl).then(() => this.router.navigateByUrl(currentUrl)); 

Esto funciona, pero sigue siendo un truco y odio que el equipo Angular no haya proporcionado un método reload()

 if (currentUrl.indexOf('/settings') > -1) { this.router.navigateByUrl('/communication').then(() => this.router.navigateByUrl('/settings')); } else { this.router.navigate(['/settings']); } 

esto funcionó para mí, tomado de esto :

 redirectTo(uri) { this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => this.router.navigate([uri])); } 

ahora puede usar like: this.redirectTo(this.router.url) ;

En mi modesta opinión, podría usar window.location.reload() en typescript. De esta manera puede ser fácil y seguro porque es parte de las funcionalidades del navegador.