web-dev-qa-db-ja.com

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を初めて使いました。

angularangular-ng-if
14
Shakir Jameel

以下のように、これらの複数行の条件と複雑な条件をコンポーネントメソッドに移動できます。

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>
22
Aravind

式のauthService.userLoggedIn（）またはauthService.adminLoggedIn（）は、関数が1回だけ呼び出されるため、誰がログインしているかをテンプレートに通知しません。

サービスでゲッターを作成してみてください。

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

次に、テンプレートで：

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