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 angular-ng-if
person Shakir Jameel    schedule 25.03.2017    source источник
comment
пересмотреть свой пост, чтобы он был более осмысленным   -  person Aravind    schedule 26.03.2017
comment
как вы определяете, вошел ли администратор в систему или пользователь вошел в систему   -  person Aravind    schedule 26.03.2017
comment
Не могли бы вы объяснить, возвращают ли authService.adminLoggedIn() и authService.userLoggedIn() tokenNotExpired, но вы тестируете логическое значение true? Могу я также спросить, возможно, вы предпочитаете делать логику частью кода JS, а не шаблоном? Похоже, это не влияет на шаблон.   -  person Ben Dadsetan    schedule 26.03.2017
comment
У меня есть разные компоненты для входа администратора и пользователя на панели навигации моей целевой страницы.   -  person Shakir Jameel    schedule 26.03.2017
comment
@BenDadsetan, я сослался на github.com/auth0/angular2-jwt, чтобы узнать об angular2- jwt В разделе «Проверка аутентификации для скрытия/отображения элементов и обработки маршрутизации» они также проверяют условие в * ngIf, я даже пытался не проверять его на логическое значение, но это все равно не сработало. Ссылка — github.com/auth0/   -  person Shakir Jameel    schedule 26.03.2017

Ответы (3)


arrow_upward
27
arrow_downward

Вы можете переместить эти многострочные условия и сложные условия в свой метод компонента, как показано ниже.

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>
person Aravind    schedule 25.03.2017
comment
Почему бы не упростить showLogout метод? return this.authService.userLoggedIn() && !this.authService.adminLoggedIn(). - person developer033; 26.03.2017
comment
@Aravind, ваше решение работает, но когда никто не вошел в систему, на панели навигации все еще отображается ссылка для выхода из системы (onAdminLogoutClick). Токены, которые я генерирую для администратора, имеют идентификатор «admin_token», а токены для пользователя имеют идентификатор «user_token». Поэтому, когда я вызываю authService.adminLoggedIn(), он возвращает tokenNotExpired('admin_token'), а для authService.userLoggedIn() возвращает tokenNotExpired('user_token'). Вот как я определяю, вошел ли пользователь или администратор. - person Shakir Jameel; 26.03.2017
comment
Вам нужно проверить, доступен ли токен в вашем методе - person Aravind; 26.03.2017
comment
Так все в порядке или вам нужна дополнительная помощь - person Aravind; 26.03.2017
comment
Теперь это работает. Я внес некоторые правки. Перед проверкой предложенного вами метода (showLogout()) я добавил еще один метод (clientLoggedIn()), чтобы проверить, вошел ли кто-то (пользователь или администратор) в систему или нет. Код HTML - ‹div *ngIf=clientLoggedIn()› ‹div *ngIf=showLogout();then userLogout else adminLogout›‹/div› ‹ng-template.... ‹/ng-template› ‹/div› clientLoggedIn (){ if(localStorage.getItem('user_token')=== null && localStorage.getItem('admin_token')=== null) вернуть false иначе вернуть true Спасибо, @Aravind. - person Shakir Jameel; 26.03.2017
comment
Я не знаю, @Aravind! :) - person Shakir Jameel; 26.03.2017
comment
В angular 7 ‹тип кнопки=кнопка (щелчок)=myClick() *ngIf=shouldShow()›MyButton‹/button› Кнопки не отображаются, даже когда метод возвращает true. Не уверен, что здесь не так. Любая подсказка будет оценена. Спасибо! - person Amit; 10.02.2019

arrow_upward
4
arrow_downward

authService.userLoggedIn() или authService.adminLoggedIn() в вашем выражении не будет информировать ваш шаблон о том, кто вошел в систему, поскольку ваша функция вызывается только один раз.

Попробуйте сделать их геттерами в вашем сервисе:

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

Затем в вашем шаблоне:

<li *ngIf="authService.userLoggedIn && !authService.adminLoggedIn"...
person bob    schedule 25.03.2017

arrow_upward
1
arrow_downward

Я думаю, что нужно создать логические свойства в компоненте и использовать его. Вместо того, чтобы писать функцию или сложное выражение в шаблоне. Функция в шаблоне снижает производительность. Сложное выражение делает его нечитаемым и неудобным в сопровождении.

person Cao Thanh Hà    schedule 21.08.2020