javascript - 刷新 Angular 中的特定组件

问题描述

新的角度，所以听起来可能是一个微不足道的问题，但是到目前为止提供的所有解决方案都未能奏效。我有一个简单的登录组件，其中在提交时，我将用户重定向到个人资料页面。我可以将用户发送到上述组件，但顶部的导航栏不会自动刷新，即我一直在进行会话检查，所以当用户登录时，导航栏应该自动显示Logout按钮而不是Login/Register按钮。我的代码文件是这样的：

登录页面.component.html

<form #loginForm="ngForm" (ngSubmit)="loginUser(loginForm)" id="loginForm" class="loginbackground">
<input ngModel #emailAddress="ngModel" type="text" autocomplete="off" placeholder="Email" id="emailAddress" name="emailAddress" />
<button type="submit" id="submit">LOGIN</button>

登录页面.component.ts

@Output() refreshEvent = new EventEmitter<any>();
loginUser(event) {
// Validations. If successful, proceed

const formData = event.value;
this.auth.loginUser(formData);
  .subscribe(data => {
    localStorage.setItem('loggedUser', JSON.stringify(data.userdata));
    // Form submit action here
    if (data.userdata.resMsg === 'Login failed') {
      this.errorPopup = true;
      this.errorText = 'Email Address and Password do not match';
    } else {
      this.refreshEvent.emit();
      this.emailAvailable = true;
      this.showLogin = false;
      this.showRegister = false;
      this.router.navigateByUrl('/404', { skipLocationChange: true }).then(() =>
        this.router.navigate(['user-profile']));
    }
  });
});
}

问题
当我手动刷新页面时，导航栏会根据书面逻辑反映所做的更改，效果很好。但是，我希望在用户实际登录并且不需要手动刷新页面时发生这种情况。

我试过的

我试过在这里使用答案，但它不起作用。
如上所示，我尝试了一个事件发射器，但我无法让它工作。
我尝试使用重新加载 nac bar 组件来刷新整个页面ngOnInit()，但它进入了无限循环（这显然是一个 hack；但为什么不这样做）

有没有办法可以干净地实现这一点？

标签： javascriptangulartypescriptangular-components

这就是我解决它的方法：

导航组件.html

...
<li *ngIf="!auth.isLoggedIn()">
  ...
</li>
<li *ngIf="auth.isLoggedIn()">
  ...
</li>
...

导航组件.ts

export class NavComponent implements OnInit {

  constructor(public auth: AuthService) {
  }
  ...

auth.service.ts

export class AuthService {
  ...
  public isLoggedIn() {
    return this.getId() !== null;
  }
  ...

在最后一种方法中，“this.getId()”可能是从 localStorage 获取令牌。

javascript - 刷新 Angular 中的特定组件

问题描述

解决方案

推荐阅读