角度路由器导航然后重新加载

Question

所以我想在导航到特定路线后重新加载应用程序..

我使用 router.navigate 导航到基于用户角色的某些路由，并且工作正常，但是如果来自登录页面（不是每次用户打开该特定路由），我必须在路由后重新加载页面 - 并且在这里重新加载是为了更新页面语言取决于用户的语言

所以我想做的是

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

但这会重新加载登录页面

Answer 1

简单的

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

Answer 2

您可以做的是将重新加载逻辑转移到需要重新加载的实际组件。 您可以订阅 NavigationEnd 事件，然后检查您来自的路线，例如

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

我把它放在我的 helperService 中：

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

然后在包含导航逻辑的文件中：

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

它所做的只是存储当前 url，然后导航到应用程序根目录并返回当前 url，强制重新加载。

请注意， _this 在您的情况下可能就是这种情况，具体取决于它在箭头函数中的嵌套位置和方式。 Window.location.reload() 对我不起作用，它最终成为未经授权的路由，迫使我回到应用程序根路由。