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

【问题标题】：Angular 2- using *ngIf with multiple conditionsAngular 2-在多个条件下使用 *ngIf
【发布时间】：2017-08-18 17:14:25
【问题描述】：

我无法在导航栏上选择性地显示链接。根据谁登录（用户或管理员），我想更改在我的导航栏上显示的链接。

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

在 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 的新手。

【问题讨论】：

修改你的帖子更有意义
你如何识别是管理员登录还是用户登录
您能否解释一下 authService.adminLoggedIn() 和 authService.userLoggedIn() 是否返回 tokenNotExpired 但您正在测试 boolean true？请问您是否更愿意将逻辑作为 JS 代码的一部分而不是在模板中？它似乎没有模板影响。
我的登录页面导航栏上有不同的管理员和用户登录组件。
@BenDadsetan，我参考了github.com/auth0/angular2-jwt 来了解 angular2-jwt 在检查身份验证以隐藏/显示元素和处理路由的部分中，他们还检查了 *ngIf 中的条件，我什至尝试不使用将其测试为布尔值，但仍然无法正常工作。链接 - github.com/auth0/…

标签： angular angular-ng-if

【解决方案1】：

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

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>

【讨论】：

为什么不简化showLogout 方法？ return this.authService.userLoggedIn() && !this.authService.adminLoggedIn().
@Aravind，您的解决方案有效，但是当没有人登录时，导航栏仍显示（onAdminLogoutClick）的注销链接。我为管理员生成的令牌的 ID 为“admin_token”，而用户的令牌的 ID 为“user_token”。因此，当我调用 authService.adminLoggedIn() 时，它返回 tokenNotExpired('admin_token')，而对于 authService.userLoggedIn()，它返回 tokenNotExpired('user_token')。这就是我确定用户或管理员是否登录的方式。
你需要检查token在你的方法中是否可用
一切都很好还是你需要更多帮助
它正在工作。我做了一些编辑。在检查您建议的方法 (showLogout()) 之前，我添加了另一个方法 (clientLoggedIn()) 来检查某人（用户或管理员）是否已登录。 HTML 代码 -

clientLoggedIn(){ if(localStorage.getItem('user_token')=== null && localStorage.getItem('admin_token')=== null) return false else return true 谢谢@Aravind。

【解决方案2】：

你的表达式中的 authService.userLoggedIn() 或 authService.adminLoggedIn() 不会让你的模板知道谁登录了，因为你的函数只被调用一次。

试着让他们为你服务：

  get userLoggedIn(): boolean {
    return this.who.user; // your logic
  }

然后在你的模板中：

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

【讨论】：

【解决方案3】：

我认为应该在组件中创建一个布尔属性并使用它。而不是在模板中编写函数或复杂的表达式。模板中的函数会降低性能。复杂的表达式使其不可读和可维护。

【讨论】：