本文介绍了Router.navigate 未在 Angular 中加载完整页面内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试解决用户在系统中冒充其他用户后遇到的问题.目前,区域用户可以冒充不加载页面全部内容的其他人,因为他们现在必须按 F5 才能查看此页面上的所有内容.我试图通过指向本地相同的数据库来重现这个问题,但无法这样做.例如,当我转到 DEV url 时,我尝试冒充其他用户,然后部分加载页面并刷新页面 (F5),我看到了整个内容.我相信这是由于路线导航而发生的,不确定我是否遗漏了要在此函数中传递的任何内容.

I am trying to fix an issue users are having after impersonating as a different user in the system. Currently, a regional user could impersonate as someone else which does not load the full content of the page as they now have to press F5 to see everything on this page. I tried to reproduce this issue by pointing to the same database in local but not able to do so. When I go to the DEV url for instance, I then try impersonating as a different user which then loads the page partially and refreshing the page (F5), I see the entire content. I believe this is happening due to the route navigate, not sure if I am missing anything to pass in this function.

this.router.navigate(['/', user.Company.Abbreviation.toLowerCase()]);

这是 Impersonate 按钮正在执行的完整功能.

This is the full function that the Impersonate button is executing.

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));

}

当我切换用户时,我看到下面的屏幕.

When I switch a user, I get the screen below.

但是当我刷新页面 (F5) 时,我会看到整个数据.

But when I refresh the page (F5), then i see the entire data.

我是否需要向 router.navigate 添加任何参数才能正确加载页面?单击模拟"按钮后尝试加载页面时,似乎缺少某些内容.谢谢!

Do I need to add any parameters to the router.navigate so it loads the page correctly? Seems like something is missing of when trying to load the page after the Impersonate button is clicked.Thanks!

更新:

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()]);**

}

推荐答案

在数据尚未准备好生成页面 UI 的情况下,使用解析器始终是一个不错的选择.除非数据完全从服务器获取,否则解析器会阻止您的应用导航.

Using a resolver is always a good choice in cases that data is not ready to generate the page UI.Resolver is preventing your app from navigate unless the data is fetched completely from server.

步骤:

  1. 通过运行以下命令创建解析器服务:
ng generate resolver test-resolver
  1. 您必须将 ajax 调用放在解析器的解析方法中:
@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();
  }
}
  1. 您必须在路由模块中定义解析器:
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'test',
        component: TestComponent,
        resolve: {
          test: TestResolver
        }
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}
  1. 您必须在组件中捕获响应(在本例中为 TestComponent):
@Component({
  selector: 'app-test',
  template: ``
})
export class TestComponent {
  constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.data.subscribe((data) => {
      console.log(data.test);
    });
  }
}

通过这种方式,您只有在数据完全加载时才能导航到下一页,并且此功能可以更轻松地实现更好的用户体验,例如加载导航到需要获取某些数据的页面.

In this way you will navigate to the next page ONLY if data is fully loaded and this feature makes it so much easier to implement a better user experience like a loading on navigation to those pages that require some data to be fetched.

这篇关于Router.navigate 未在 Angular 中加载完整页面内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 15:17
查看更多