Angular 2-在多个条件下使用 *ngIf

Question

我无法在我的导航栏上有选择地显示链接。 根据登录者(用户或管理员)，我想更改导航栏上显示的链接。

以下是用户/管理员注销的此类实例的代码。

在 navbar.component.html -

<li *ngIf="authService.userLoggedIn()== true && authService.adminLoggedIn() == false" 
       [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
  <a (click)="onUserLogoutClick()" href="#">Logout</a>
</li>

<li *ngIf="(authService.adminLoggedIn() == true) && (authService.userLoggedIn() == false)" 
      [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
   <a (click)="onAdminLogoutClick()" href="#">Logout</a>
</li>

authService.adminLoggedIn() 和 authService.userLoggedIn() 都返回 tokenNotExpired;

下面是navbar.component.ts-

中的相关代码

 onUserLogoutClick() {
   this.authService.userLogout();
   this.flashMessage.show('You are now logged out', {cssClass: 'alert-success', timeout: 3000});
   this.router.navigate(['/login']);
   return false;   
 }

 onAdminLogoutClick() {
   this.authService.adminLogout();
   this.flashMessage.show('Administrator now logged out', {cssClass: 'alert-success', timeout: 3000});
   this.router.navigate(['/admin']);
   return false;   
 }

authService.adminLogout() 和 authService.userLogout() 只是清除存储在本地存储中的 token 。

如果我犯的错误很愚蠢，我提前道歉。我是 Angular 的新手。

Answer 1

您可以将这些多行条件和复杂条件移动到您的组件方法中，如下所示

showLogout(){
    if(this.authService.userLoggedIn()== true && this.authService.adminLoggedIn() == false)
        return true;
    else
        return false;
}

另外，由于 angular4 有 *ngIf 和 else，你可以将它用作

 <div *ngIf="showLogout();then userLogout else adminlogout"></div>

<ng-template #userLogout><a (click)="onUserLogoutClick()" href="#">Logout</a></li></ng-template>
<ng-template #adminlogout><a (click)="onAdminLogoutClick()" href="#">Logout</a></li></ng-template>