javascript - Router.navigate 没有加载 Angular 中的完整页面内容

Question

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

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

这是模拟按钮正在执行的完整功能。

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

当我切换用户时，我看到下面的屏幕。

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

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

更新:

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

Answer 1

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

步骤:

1. 通过运行此命令创建解析器服务:

ng generate resolver test-resolver

1. 您必须将 ajax 调用放在解析器的 resolve 方法中:

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

通过这种方式，您将仅在数据完全加载时导航到下一页，并且此功能使得实现更好的用户体验变得更加容易，例如在导航到需要获取一些数据的页面时加载。