如何在没有 location.reload() 的情况下登录后使用 angular 路由器重新加载组件？

Question

我已经创建了登录、注册、更改密码和注销服务（并且它们有效）。用户登录后显示用户名而不是登录按钮，但用户需要刷新站点或导航到其他 url 才能显示用户名。

location.reload() 解决了这个问题，但这并不是最好的选择。

我的身份验证路由结构如下：

在应用程序中-routing.module.ts 我有：

path: 'auth',
loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)

然后在pages-routing.module我有认证路由，例如：

path: 'login',
component: LoginComponent

我为位于 app/services/ 的每个身份验证过程使用一个服务，组件位于 app/pages/ 目录中。

编辑：澄清一下：登录表单是一个弹出窗口，可以出现在我网站的每个页面中。因此，一旦用户登录，打开登录表单的按钮将被替换为用户名，但当用户重新加载页面或导航到不同的 url 时会发生这种情况。我希望这在用户登录（或注册、注销等）后立即发生，并且我希望用户停留在同一页面上。我能想到的一种方法是快速导航到另一个页面，然后返回到同一页面，但我认为这不是一个好的解决方案

Answer 1

您可以通过路由服务导航到其他路由，如下所示：

import {Router} from '@angular/router';

constructor(private router: Router) {}

navigateToLogin() {
  this.router.navigateByUrl('/login');
}

您可以使用 .navigateByUrl() 转到某个绝对路径，使用 .navigate() 通过相对路径转到其他 url。

如何在没有 location.reload() 的情况下登录后使用 angular 路由器重新加载组件？

How to reload component with angular router after login without location.reload()?

authentication

routes

reload

angular