Блог

в моем приложении ng я работаю с ролями. Все роли хранятся в массиве. Как я могу проверить, существует ли роль в моем HTML-шаблоне, не делая ничего подобного:

   <div class="customer-entry" *ngFor="role of userRoles">
    <div *ngIf="role == 'Admin' || role == 'Superuser'">
      <span class="badge badge-warning">allowed</span>
    </div>
  </div>
  

На мой взгляд, должно быть решение для этого без ngFor.

Я бы определил структурную директиву для этого:

 import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';

@Directive({ 
     selector: '[hasRole]' 
})
export class HasRoleDirective {

    constructor( private templateRef: TemplateRef<any>,
                 private viewContainer: ViewContainerRef,
                 private userService: UserService) { }
    @Input() set hasRole(role: string) {
       if (this.userService.getRole() === role) {
          this.viewContainer.createEmbeddedView(this.templateRef);
       } else {
          this.viewContainer.clear();
      } 
    }
}
  

Теперь вы можете использовать директиву следующим образом:

 <div *hasRole="'Admin'">
  <span class="badge badge-warning">allowed</span>
</div>
  

Преимуществом было бы то, что вы можете использовать его в любом месте вашего проекта без дублирования кода.

Одним из способов было бы использование канала, это также быстрее (если оно чистое), чем использование сервиса

 @Pipe({ name: 'hasPermission' })
export class HasPermission implements PipeTransform {

  transform(permissions: string[], required: string[]): boolean {
    return permissions.some((current) => required.some((req) => current === req));
  }
}
  

Используйте его как

  <div class="customer-entry" *ngIf="userRoles | hasPermission: ['Admin', 'Superuser']">
    <div>
      <span class="badge badge-warning">allowed</span>
    </div>
  </div>
  

Или

   <div class="customer-entry" *ngFor="lot role of userRoles">
    <div *ngIf="[role] | hasPermission: ['Admin', 'Superuser']">
      <span class="badge badge-warning">allowed</span>
    </div>
  </div>
  

Не тестировал, это всего лишь прототип