Question

我想根据变量的值调用this.loggedInService.isLoggedIn方法：login()和logout()

如果变量!this.loggedInService.isLoggedIn的值是致电login()
如果为!this.loggedInService.isLoggedIn，则此方法为logout()。

如何在app.html中正确实现它？

模板：

 <li class="nav-item">
    <a class="btn btn-outline-success" 
      [class.btn-outline-success]="!this.loggedInService.isLoggedIn"
      [class.btn-outline-danger]="this.loggedInService.isLoggedIn" 
      ngIf ....>
      {{this.loggedInService.isLoggedIn ? 'Exit' : 'Enter'}}
    </a>
  </li>

app.ts：

export class AppComponent implements OnInit {
  constructor(public loggedInService: LoggedinService, public router: Router) {}

  ngOnInit() {}

  login(): void {
    this.loggedInService.login().subscribe(() => {
      if (this.loggedInService.isLoggedIn) {
        let redirect = this.loggedInService.redirectUrl
          ? this.loggedInService.redirectUrl
          : '/gallery';
        this.router.navigate([redirect]);
      }
    });
  }

  logout(): void {
    this.loggedInService.logout();
  }
}

Answer 1

您可以使用三元运算符基于这样的状态运行函数

<li (click)="this.loggedInService.isLoggedIn ? logout() : logIn()" >
{{this.loggedInService.isLoggedIn ? logout : logIn}}
</li>

Answer 2

让此逻辑移动ts文件，然后在ts文件中创建一个函数toggleLogin()并从html调用它。

在HTML中

  <li class="nav-item">
                <a class="btn btn-outline-success"
                   [class.btn-outline-success]="!this.loggedInService.isLoggedIn"
                   [class.btn-outline-danger]="this.loggedInService.isLoggedIn"
                   (click)="toggleLogin()"
                  >
                    {{this.loggedInService.isLoggedIn ? 'Exit' : 'Enter'}}
                </a>
            </li>

在ts文件中

 toggleLogin(): void {
        if(this.loggedInService.isLoggedIn){
            this.logout();
       }else{
            this.login();
       }
    }

Answer 3

调用logInOrOut函数，该函数将检查this.loggedInService.isLoggedIn，然后调用适当的函数

如何选择要在ngIf中调用的函数？

3 个答案:

在HTML中

在ts文件中