Динамически скрывая детей, используя нг-контент в угловых 7

Question

В моем проекте есть сценарий, в котором содержимое должно быть скрыто на основании разрешения роли, предоставленного для конкретного пользователя, вошедшего в систему.

Итак, мы создали глобальный компонент с именем <app-authorise>, который будет включатьдочерние элементы на основе разрешения, которое имеет пользователь.

Component.ts

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { GlobalService } from '../../../core/global/global.service';

@Component({
  selector: 'app-authorise',
  templateUrl: './app-authorise.component.html',
  styleUrls: ['./app-authorise.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class AuthoriseComponent {
  @Input() public module: string;
  @Input() public permission: string;
  @Input() public field: string;
  @Input() public role: string;

  public currentUser: any = {};
  public currentUserRoles = [];
  constructor(private globalService: GlobalService) {
    this.globalService.subscribeToUserSource((updatedUser: any) => {
      this.currentUser = updatedUser;
      this.currentUserRoles = updatedUser.rolePermissions;
    });
  }

  get enable() {
    const {
      currentUser,
      currentUserRoles,
      module,
      permission,
      role
    } = this;
    if (currentUser && currentUserRoles) {
      return role ? this.hasRole(currentUserRoles, role) :
      this.globalService.hasPermissionForModule({
        currentUserRoles,
        module,
        permission,
      });
    }
    return false;
  }

  public hasRole(currentUserRoles: any, role: string) {
    return Boolean(currentUserRoles[role]);
  }
}

Component.html

<ng-container>
  <ng-content *ngIf="enable"></ng-content>
</ng-container>

UseCase

<app-authorise [module]="properties.modules.project" [permission]="properties.permissions.CREATE">
  <app-psm-list></app-psm-list>
</app-authorise>

Фактическая проблема, с которой мы сталкиваемся, заключается в том, что метод onInit () дочернего компонента вызывается, даже если дочерний элемент включен внутриродительский компонент.

Любая идея, советы по этому вопросу будут очень полезны.

Answer 1

Обнаружил, что директива о пользовательских разрешениях действительно полезна.Можно использовать директиву вместо компонента.

Answer 2

Вы можете проверить условие перед проекцией <app-psm-list> компонента на <app-authorise>, так что app-psm-list компоненты ngOnInit() не будут вызваны в случае сбоя условия.

Для этого вам понадобится некоторая ссылкакак #authorise против app-authorise компонента

<app-authorise #authorise [module]="properties.modules.project" [permission]="properties.permissions.CREATE">
  <ng-conatiner *ngIf="authorise.enable">
      <app-psm-list></app-psm-list>
  </ng-conatiner>
</app-authorise>

И условие не требуется внутри app-authorise снова

app-authorize

<ng-container>
  <ng-content></ng-content>
</ng-container>

DEMO