Javascript 调用函数并将其传递给*ngIf（第6章）

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

在我的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”，但它不起作用。这只是在导航栏上显示登录链接，但一旦我登录，登录链接仍然存在，并且注销链接永远不会显示。

您可以在组件构造函数中调用

checkStorage

函数。然后，您可以轻松地将

*ngIf

与您的

身份验证

属性一起使用：

<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>

您可以在组件构造函数中调用

checkStorage

函数。然后，您可以轻松地将

*ngIf

与您的

身份验证

属性一起使用：

<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>

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

<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>

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

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

<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>

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

<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>

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

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

<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>

对于两种不同的情况，您有相同的检查。当用户loggedIn和loggedOut调用checkStorage方法时，您可能忘记了一个“not”（

！

）来更新authenticate变量。其余部分自动工作。显示时使用*ngIf=“！authenticate”login@PratapA.K在登录时添加ngIf=“！authenticate”会隐藏注销链接。但是，当我尝试登录时，登录链接仍保留在那里，而注销链接从未显示。请告诉我您在哪里调用函数checkstorage（）？对于两种不同的情况，您有相同的检查。当用户loggedIn和loggedOut调用checkStorage方法时，您可能忘记了一个“not”（

！

）来更新authenticate变量。其余部分自动工作。显示时使用*ngIf=“！authenticate”login@PratapA.K在登录时添加ngIf=“！authenticate”会隐藏注销链接。但是，当我尝试登录时，登录链接仍然存在，而注销链接从未显示。您能告诉我您在哪里调用函数checkstorage（）？