Router.navigate 未在 Angular 中加载整个页面内容

Question

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

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.

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

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!

UPDATE:

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

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.

Steps:

1. create a resolver service by running this command:

ng generate resolver test-resolver

2. you have to put your ajax call in the resolve method of resolver:

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

3. you have to define your resolver in your routing module:

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'test',
        component: TestComponent,
        resolve: {
          test: TestResolver
        }
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

4. you have to catch the response in your component (in this case 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.