No puedo mostrar enlaces de forma selectiva en mi barra de navegación. Según quién inicia sesión (usuario o administrador), quiero cambiar qué enlace se muestra en mi barra de navegación.
A continuación se muestra el código de una de esas instancias en las que el usuario/administrador cierra la sesión.
En 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> Tanto authService.adminLoggedIn() como authService.userLoggedIn() devuelven tokenNotExpired;
A continuación se muestra el código relevante en 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() y authService.userLogout() simplemente borran el token almacenado en el almacenamiento local.
Pido disculpas de antemano si el error que he cometido es una tontería. Soy nuevo en Angular.
Puede mover estas condiciones multilínea y condiciones complejas a su método de componente como se muestra a continuación
showLogout(){ if(this.authService.userLoggedIn()== true && this.authService.adminLoggedIn() == false) return true; else return false; } Además, como angular4 tiene *ngIf and else , puede usarlo como
<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>authService.userLoggedIn() o authService.adminLoggedIn() en su expresión no mantendrían su plantilla informada sobre quién está conectado ya que su función se invoca solo una vez.
Intente hacerlos getter en su servicio:
get userLoggedIn(): boolean { return this.who.user; // your logic }Luego en tu plantilla:
<li *ngIf="authService.userLoggedIn && !authService.adminLoggedIn"...Creo que debería crear propiedades booleanas en el componente y usarlo. En lugar de escribir funciones o expresiones complejas en la plantilla. La función en la plantilla reduce el rendimiento. La expresión compleja hace que no sea legible ni mantenible.