Búsqueda de sitios web

typescript - Angular | ¿hay alguna manera de hacer que *ngIf se ejecute solo una vez?


Tengo un pequeño problema, necesito aplicar validación de roles en mi solicitud de Angular. La aplicación se construye a partir de páginas en las que cada página contiene varios componentes. Los privilegios de usuario se conceden a nivel de componentes, así que lamentablemente no puedo usar solo Route Guard para conceder una página completa, tuve que añadir validación para cada componente usando un simple *ngIf:

     <results-component 
          *ngIf="auth.hasPermission('driver_productivity')"
          [format] = "driver_productivityFormat" 
          [IsFullWidth] = "IsFullWidth"
          (customEvent)="showPrint($event)">
     </results-component>

auth.service.ts:

hasPermission(permissionName){
if (!this.tokenPayload){
  this.getToken().subscribe(t=>{this.tokenPayload=decode(t.getValue())});
  if (this.tokenPayload.roles && this.tokenPayload.roles.length>0 ){
    this.permissions={};
    for (let i=0;i<this.tokenPayload.roles.length;i++){
      this.permissions[this.tokenPayload.roles[i]]=true
    }
  }
}
return this.permissions[permissionName]

}

pero dado que tengo múltiples componentes por página, esta validación se acumula demasiadas veces, así que se convirtió en una solución abusiva.

[Violación] El manejador 'setInterval' tomó 150 ms zone.js:1755 [Violación] El manejador 'click' tomó 318 ms zone.js:2279 [Violación] El manejador 'requestAnimationFrame' tomó 84 ms zone.js:1755 [Violación] El manejador 'click' tomó 261 ms

¿Hay una manera de hacer que *ngIf se ejecute solo una vez? ¿cuando el componente se carga por primera vez?

Respuesta #1

¿Hay alguna manera de hacer que *ngIf se ejecute solo una vez? ¿cuando el componente se carga por primera vez?

Sí. Mueve la lógica correspondiente al método ngOnInit(...) de tu componente. De este modo, se ejecuta solo una vez cuando se carga el componente.

Respuesta #2

Puedes mover tu lógica a ngOnInit, como ya se ha sugerido, o puedes crear un pipe. Dado que los pipes son memorizados, la lógica dentro solo se ejecutará nuevamente cuando cambie la entrada.

Creé un Stackblitz mostrando esto.