Javascript 仅当用户登录*ngIf时显示锚定

所以我在LocalStorage中有一个项目，根据该项目是否存在，我想在导航栏上显示一个锚（注销）。现在我的线路看起来像这样：

<a href='#' *ngIf='!loggedIn' (click)='logOut()'>Log Out</a>

---

在登录页面上一切正常，但在我登录之后，锚仍然没有显示。有什么解决方案吗？

问题是当应用程序启动时，

loggedIn

被初始化一次。但它不监听本地存储的更改。您需要创建一个更新变量的事件

一种方法是使用

可观察对象

：

您可以创建一个

AuthService

，它具有方法

login（）

，

logout（）

和一个公共可观察变量

isLoggedIn$

@Injectable({providedIn: 'root'})
export class AuthService {
  public isLoggedIn$: BehaviorSubject<boolean>;

  constructor() {
    const isLoggedIn = localStorage.getItem('loggedIn') === 'true';
    this.isLoggedIn$ = new BehaviorSubject(isLoggedIn);
  }

  login() {
    // logic
    this.isLoggedIn$.next(true);
  }

  logout() {
    // logic
    this.isLoggedIn$.next(false);
  }
}

在模板中使用它：

<a href='#' *ngIf='authService.isLoggedIn$ | async' (click)='logOut()'>Log Out</a>

请看一下这项工作。

//做任何事

---

如果用户已登录，则

userCheck

为

true

否则

false

更简单的方法是使用getter

get loggedIn()
{
    return localStorage.getItem('loggedIn') === 'true';
}

---

在

.ts

文件中

authCheck（）{
返回此.service.isAuthenticated（）；
}

其中：

service

是基于本地存储和函数返回

true

或

false

然后在您的

html

：

---

注销

显示您的代码，以便我们了解您的想法。您能显示您为

loggedIn

分配的值吗？public loggedIn=localStorage.getItem（'loggedIn'）；如果

loggedIn

指示用户已登录，则当您登录时，它将为真！loggedIn将返回false，并且不会显示

的逻辑错误！loggedIn

假设var表示用户已登录，并且假设当用户登录时var未更新感谢您的时间和答案，但它仍然不适用于我。我的意思是，它的行为与我以前使用代码时的行为相同。你看过Stackblitz吗？它在Stackblitz中确实有效，所以你的代码中一定有一些不同的东西。请注意，您必须在

logout（）

方法中调用

this.authService.logout（）

。此外，默认状态为注销。因此，首先需要调用

this.authService.login（）

，然后应该显示您的按钮。

<a href='#' *ngIf='authService.isLoggedIn$ | async' (click)='logOut()'>Log Out</a>

<ul *ngIf="userCheck; else not_found" class="nav navbar-nav navbar-right">
    <li><a (click)="logout()" href="/">Logout</a></li>
</ul>
<ng-template #not_found>
    // do anything
</ng-template>

get loggedIn()
{
    return localStorage.getItem('loggedIn') === 'true';
}