कोणीय 2- एकाधिक स्थितियों के साथ * ngIf का उपयोग

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() बस स्थानीय संग्रहण में संग्रहीत टोकन को साफ़ करता है।

अगर मैंने जो गलती की है, वह मैं मूर्खता से माफी माँगता हूं। मैं कोणीय के लिए नया हूँ।

Answer 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> 

Answer 2

authService.userLoggedIn उपयोग कर सकते हैं() या authService.adminLoggedIn() आपकी अभिव्यक्ति में आपके टेम्पलेट को सूचित नहीं करेगा कि आपके फ़ंक्शन को केवल एक बार बुलाया गया है।

प्रयास करें उन्हें अपनी सेवा में मनुष्य:

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

अपने खाके में

तब:

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