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

如果我犯的错误很愚蠢，我会事先道歉。我是Angular的新手。

Answer 1

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

def answer_five():
    return census_df.groupby('STNAME')['CTYNAME'].count().idxmax()

此外，由于 angular4 有showLogout(){ if(this.authService.userLoggedIn()== true && this.authService.adminLoggedIn() == false) return true; else return false; }，您可以将其用作

*ngIf and else

Answer 2

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

Answer 3

表达式中的

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

尝试让它们在您的服务中得到吸气：

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

然后在你的模板中：

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

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

3 个答案: