Angular 2-使用* ngIf有多个条件

我无法在导航栏上选择性地显示链接。根据谁登录（用户或管理员），我想更改哪个链接显示在我的导航栏上。Angular 2-使用* ngIf有多个条件

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

在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()只是清除存储在本地存储中的令牌。

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

来源

2017-03-25 Shakir Jameel

修改您的文章更意味着FUL – Aravind

你怎么确定，如果管理员登录或用户登录在 – Aravind

您可以请解释authService.adminLoggedIn（）和authService.userLoggedIn（）是否返回tokenNotExpired，但您测试布尔值为true？我还可以问你是否愿意将逻辑作为JS代码的一部分而不是在模板中？它似乎没有模板的影响。 –

您可以将这些多条件和复杂的条件下，以组件的方法如下

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

此外，作为angular4有*ngIf and 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>

来源

2017-03-25 21:21:22 Aravind

为什么不简化'showLogout' * *的方法？ '返回this.authService.userLoggedIn（）&&！this.authService.adminLoggedIn（）'。 – developer033

确定。烨可以这样做了。 – Aravind

@Aravind，你的解决方案的工作，但是当没有人登录，导航条仍然显示注销链接（onAdminLogoutClick）。我生成admin的令牌具有“admin_token”的ID，以及该用户的令牌具有“user_token”的ID。所以，当我打电话authService.adminLoggedIn（）返回tokenNotExpired（ 'admin_token'）和authService.userLoggedIn（）返回tokenNotExpired（ 'user_token'）。这是我的判断是否为用户或管理员登录。 –

authService.userLoggedIn （）或authService.adminLoggedIn（）不会让你的模板知道谁登录了，因为你的函数只能被调用一次。

设法让他们吸气剂为您服务：

在你的模板

然后：

<li *ngIf="authService.userLoggedIn && !authService.adminLoggedIn"...

来源

2017-03-25 21:45:36 bob

Angular 2-使用* ngIf有多个条件

回答

相关问题