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

Posted 2023-02-22

【中文标题】角度路由器导航然后重新加载

【英文标题】：angular router navigate then reload

【发布时间】：2019-05-03 08:06:56

【问题描述】：

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

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

所以我尝试做的是

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

但这会重新加载登录页面

【问题讨论】：

导航到同一个组件不会重新加载数据 - ***.com/a/68503542/7573844

【参考方案1】：

简单

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

【讨论】：

重新加载页面需要太多时间

找了好久的答案，简单有效

如果速度变慢，请进行真正的重新加载：window.location.href = window.location.protocol + '//' + window.location.host + '/path/to';。这更符合用户的期望。

简单有效的解决方案，帮了我，谢谢！

问题：您可以看到导航页面闪烁，然后重新加载。不好。

【参考方案2】：

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

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

【参考方案3】：

简单地做

location.href = '/admin/dashboard';

【讨论】：

这个答案拯救了我的一天。