Angular 如何在不重新加载页面的情况下使用ngIf

我有导航栏组件，我的目标是根据用户登录显示两个不同的导航栏，即，如果用户登录，他们将看到一个导航栏；如果没有，另一个。我正在使用ngIf实现这一目的，除了登录用户在手动刷新页面之前仍然可以看到未登录用户的导航栏外，其他一切都很正常

从'@angular/core'导入{Component，OnInit}；
从'@models/User.model'导入{User}；
从'@services/auth.service'导入{AuthenticationService}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：“应用程序导航栏”，
templateUrl:'./navbar.component.html'，
样式URL:['./navbar.component.css']
})
导出类NavbarComponent实现OnInit{
用户：用户；
作者：可观察；
构造函数（私有身份验证服务：AuthenticationService）{}
恩戈尼尼特（）{
this.authObs=this.auth_service.currentUser；
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs”导入{BehaviorSubject，Observable}；
从“rxjs/operators”导入{map}；
从'@models/User.model'导入{User}；
@可注射（{providedIn:'root'}）
导出类身份验证服务{
private currentUserSubject：行为主体；
公共用户：可观察；
构造函数（专用http:HttpClient）{
this.currentUserSubject=new BehaviorSubject（JSON.parse（localStorage.getItem（'currentUser'））；
this.currentUser=this.currentUserSubject.asObservable（）；
}
public get currentUserValue（）：用户{
返回此.currentUserSubject.value；
}
}
登录（电子邮件：字符串，密码：字符串）{
返回此.http.post（`${environment.apirl}/api/auth/`，{email，password}）
.pipe（映射（用户=>{
//将用户详细信息和jwt令牌存储在本地存储中，以便在页面刷新之间保持用户登录
localStorage.setItem（'currentUser'，JSON.stringify（user））；
this.currentUserSubject.next（用户）；
this.currentUser=this.currentUserSubject.asObservable（）；
console.log（“TCL:AuthenticationService->login->user”，user）
返回用户；
}));
}

我认为问题在于

authService

没有发出新值，否则*ngIf和异步管道的使用看起来不错

如何调用/使用authService来更新loggedIn信息

如果更新localStorage信息以反映用户是否为loggedIn，则应为主题发出新值，如：

updateUserAuth(newValue) {
    this.currentUserSubject.next(newValue);
    this.currentUser = this.currentUserSubject.asObservable();
}

您可以在用户登录后或在任何时候更新currentUser状态时调用此方法。这取决于您的代码逻辑，但重要的是您必须发出新值，否则主题将永远不会通知订阅者有新值可用

---

您是否尝试过调试authObs变量并在模板中打印其值

   <.. *ngIf="authObs | async as auth; else elseBlock">
     Auth: {{auth}} 

认证：{{Auth}

我认为您也可以跳过构造函数中的currentUser初始化（或者您是否总是将用户信息存储在本地，直到显式注销？）：

构造函数（私有http:HttpClient）{
this.currentUserSubject=newBehaviorSubject（JSON.parse（…）；
//对于未登录的用户，currentUser将为falsy。
//this.currentUser=this.currentUserSubject.asObservable（）；
}

---

最终你能用你的代码创建一个stackBlitz示例吗？

你什么时候更新过

currentUserSubject

？对不起，我应该如何以及什么时候更新它？在用户登录后？如果你想让消耗可观察对象的东西获得新的值，那将是一个很好的时机。我添加了一个答案，在这里我展示了如何使用添加一个方法来更新loggedIn用户的值。尝试清除本地存储。您在注销时是否从本地存储调用removeItem？我在您的服务中没有看到注销功能。如果本地存储为空，您的代码应该可以工作。我忘了将aurhService的登录功能添加到我的问题中，现在添加了它。我在注销后已发出新值用户是loggenIn，它没有帮助。

constructor(private http: HttpClient) {
    this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(...));

   // currentUser will be falsy for not logged in users. 
   // this.currentUser = this.currentUserSubject.asObservable();
  }