Question

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

在我的navbar.component.ts文件中，我有一个函数要检查localstorage是否包含任何值，然后该函数应返回false并且注销链接不再可见，并且当用户未登录时则只有登录链接应该出现。

这是我的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”，但无法正常工作。这只是在导航栏上显示登录链接，但是一旦我登录，登录链接仍会保留在那里，并且注销链接永远不会显示。

Answer 1

成功登录后执行=> 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;
    }  
}

无需返回任何内容。并且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>

Answer 2

您可以在组件构造函数中调用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>

在Angular 6中调用一个函数并将其传递给* ngIf

2 个答案: