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

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>