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

Question

I want to call, depending on the value of the variable, this.loggedInService.isLoggedIn methods: login() and logout()

• If the value of the variable !this.loggedInService.isLoggedIn then call login()
• If !this.loggedInService.isLoggedIn then this method logout() .

How to implement it correctly in app.html ?

template:

 <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

You can use ternary operator to run a function based on state like this

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

Answer 2

Let this logic move ts file and Just create one function toggleLogin() in ts file and call it from the html.

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

in ts file

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

Answer 3

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