调用函数并将其传递给 Angular 中的 *ngIf 6

Question

我是 Angular 的新手。目前，应用程序的登录功能正在运行。当用户登录时，它将用户数据存储在本地存储中。我有一个导航栏，它有两个 li 元素：登录和注销。当用户登录时，我希望显示 Logout link，但是当用户注销时，Logout link 应该消失，而 Login link 应该出现。

在我的 navbar.component.ts 文件中，我有一个函数，我正在检查本地存储是否包含任何值，然后函数应该 return false 而注销 link 不应该不再可见，当用户未登录时，只应显示登录 link。

这是我的 navbar.component.ts 代码：

 authenticate: boolean = false;   
 token: any;

  checkStorage(){
    this.token = localStorage.getItem('user')
    if(this.token === null){
      this.authenticate = false;
      return this.authenticate;
    } else {
      this.authenticate = true;
      return this.authenticate;
    }

}

这里是 navabar.component.html：

<ul class="navbar-nav">
        <li *ngIf="authenticate" class="nav-item">
          <a class="nav-link" href="#" routerLinkActive="active" routerLink="/login">Login</a>
        </li>
        <li *ngIf="authenticate"class="nav-item">
            <a class="nav-link" href="#" (click)="onLogout()">Logout</a>
          </li>
      </ul>

如有任何帮助，我们将不胜感激。谢谢

已编辑：我尝试在登录时使用 *ngIf="!authenticate" 但它不起作用。这只是在导航栏上显示登录名 link，但是一旦我登录，登录名 link 仍然存在，而注销 link 永远不会出现。

Answer 1

您可以在组件构造函数中调用 checkStorage 函数。然后你可以很容易地使用 *ngIf 和你的 authenticate 属性:

<ul class="navbar-nav">
  <li *ngIf="!authenticate" class="nav-item">
    <a class="nav-link" href="#" routerLinkActive="active" routerLink="/login">Login</a>
  </li>
  <li *ngIf="authenticate"class="nav-item">
    <a class="nav-link" href="#" (click)="onLogout()">Logout</a>
  </li>
</ul>

Answer 2

登录成功后做=> this.authenticate = true; 如果登录不成功=> this.authenticate = false;

如果您在 ngOnInit() 或 constructor() 中调用 checkStorage() 方法，它只会在初始化组件时调用一次。所以当用户尝试登录时，你必须做以上两件事（当调用 login() 方法时）。

你的 checkStorage() 应该是

checkStorage(){
    this.token = localStorage.getItem('user')
    if(this.token === null){
      this.authenticate = false;
    } else {
      this.authenticate = true;
    }  
}

不需要return任何东西。 html 代码应该是

<ul class="navbar-nav">
  <li *ngIf="!authenticate" class="nav-item">
    <a class="nav-link" href="#" routerLinkActive="active" routerLink="/login">Login</a>
  </li>
  <li *ngIf="authenticate"class="nav-item">
    <a class="nav-link" href="#" (click)="onLogout()">Logout</a>
  </li>
</ul>

调用函数并将其传递给 Angular 中的 *ngIf 6

Calling a function and passing it to *ngIf in Angular 6

javascript

typescript

angular-ng-if

angular