0
226
VistasRouter.navigate no carga el contenido de la página completa en Angular
Estoy tratando de solucionar un problema que tienen los usuarios después de hacerse pasar por un usuario diferente en el sistema. Actualmente, un usuario regional podría hacerse pasar por otra persona que no carga el contenido completo de la página, ya que ahora tiene que presionar F5 para ver todo en esta página. Traté de reproducir este problema apuntando a la misma base de datos en local pero no pude hacerlo. Cuando voy a la URL de DEV, por ejemplo, intento suplantar a un usuario diferente que luego carga la página parcialmente y actualiza la página (F5), veo todo el contenido. Creo que esto está sucediendo debido a la ruta de navegación, no estoy seguro si me falta algo para pasar en esta función.
this.router.navigate(['/', user.Company.Abbreviation.toLowerCase()]);Esta es la función completa que ejecuta el botón Suplantar.
setImpersonatation() { this.store.dispatch(new AuditSearchClearAction()); this.store.dispatch(new CompanyChangedAction(this.impersonationForm.value.company, null)); const user = this.impersonationForm.value.user as UserLogin; this.store.dispatch(new BaseUserSetAction(user as User)); this.store.dispatch(new AuthorizeAction(user)); this.router.navigate(['/', user.Company.Abbreviation.toLowerCase()]); this.store.dispatch(new MyWorkSetLetterReminderUserAction(user.UserId));}
Cuando cambio de usuario, aparece la siguiente pantalla. 
Pero cuando actualizo la página (F5), veo todos los datos. 
¿Necesito agregar algún parámetro al router.navigate para que cargue la página correctamente? Parece que falta algo al intentar cargar la página después de hacer clic en el botón Suplantar. ¡Gracias!
ACTUALIZAR:
setImpersonatation() { this.store.dispatch(new AuditSearchClearAction()); this.store.dispatch(new CompanyChangedAction(this.impersonationForm.value.company, null)); const user = this.impersonationForm.value.user as UserLogin; this.store.dispatch(new BaseUserSetAction(user as User)); this.store.dispatch(new AuthorizeAction(user)); this.store.dispatch(new MyWorkSetLetterReminderUserAction(user.UserId)); **this.changeDetector.detectChanges(); this.router.navigate(['/', user.Company.Abbreviation.toLowerCase()]);**}
1 Respuestas
Responde la pregunta0
El uso de un solucionador siempre es una buena opción en los casos en que los datos no están listos para generar la interfaz de usuario de la página. Resolver impide que su aplicación navegue a menos que los datos se obtengan completamente del servidor.
Pasos:
- cree un servicio de resolución ejecutando este comando:
ng generate resolver test-resolver- tienes que poner tu llamada ajax en el método de resolución de resolución:
@Injectable({ providedIn: 'root' }) export class TestResolver implements Resolve<Hero> { constructor(private service: TestService) {} resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<any>|Promise<any>|any { return this.service.testAjax(); } }- tienes que definir tu resolver en tu módulo de enrutamiento:
@NgModule({ imports: [ RouterModule.forRoot([ { path: 'test', component: TestComponent, resolve: { test: TestResolver } } ]) ], exports: [RouterModule] }) export class AppRoutingModule {}- debe capturar la respuesta en su componente (en este caso, TestComponent):
@Component({ selector: 'app-test', template: `` }) export class TestComponent { constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.data.subscribe((data) => { console.log(data.test); }); } }De esta manera, navegará a la página siguiente SOLO si los datos están completamente cargados y esta función hace que sea mucho más fácil implementar una mejor experiencia de usuario, como una carga en la navegación a aquellas páginas que requieren que se obtengan algunos datos.