angular router navigate then reload

Question

So I want to reload the app after navigating to a specific route ..

I use router.navigate to navigate to certain route based on user role and that works fine but I have to reload the page after routing if coming from sign in page (not every time user opens that certain route) - and reloading here is to update page language depending on user's language

so what i tried to do is

  else if(this.sp.role === 'Admin') {
      console.log('ooo')
      this.router.navigate(['/admin/dashboard']); 
      this.window.location.reload();

but that reloads the sign in page

Answer 1

Simple

this.router.navigate(['path/to'])
  .then(() => {
    window.location.reload();
  });

Answer 2

What you could do is shift the reload logic to the actual component which needs to be reloaded. You can subscribe to the NavigationEnd event and then check the route you're coming from eg

this.router.events
  .pipe(
    filter(value => value instanceof NavigationEnd),
  )
  .subscribe(event => {
  if (event.url === 'http://mypreviousUrl.com') {
    this.window.location.reload();
  }
});

Answer 3

简单地做

location.href = '/admin/dashboard';

Answer 4

i put this in my helperService:

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
  }

then this in the file that contains the navigating logic:

_this.router.navigate(['somecomponent/anothercomponent']).then(() => {
    _this.helperService.reloadCurrentRoute();
});

All it does is store current url then navigates to the application root and back to current url forcing a reload.

Note that _this might be just this in your case depending on where and how it's nested in arrow functions. Window.location.reload() did not work for me, it ended up as an unauthorized route forcing me back to the application root route.