[英]How to choose function to call in ngIf?
我想根据变量的值调用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>
应用程式:
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();
}
}
您可以使用三元运算符基于这样的状态运行函数
<li (click)="this.loggedInService.isLoggedIn ? logout() : logIn()" >
{{this.loggedInService.isLoggedIn ? logout : logIn}}
</li>
让此逻辑移动ts文件,然后在ts文件中创建一个功能toggleLogin()
并从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>
toggleLogin(): void {
if(this.loggedInService.isLoggedIn){
this.logout();
}else{
this.login();
}
}
调用将检查this.loggedInService.isLoggedIn
的logInOrOut
函数,然后调用适当的函数
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.