Реализация директивы разрешения не будет обновлять представление до обновления страницы

Question

Я создал директиву для отображения / скрытия элемента в соответствии с разрешением. Реализация директивы выглядит примерно так:

 <ng-container *appHasAccess="'user.profile'">
<button>Profile</button>
</ng-container>

Код директивы:

import {
  Directive,
  Input,
  OnDestroy,
  OnInit,
  TemplateRef,
  ViewContainerRef,
} from "@angular/core";
import { PermissionsService } from "@core/services/permissions";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";

@Directive({
  selector: "[appHasAccess]",
})
export class HasAccessDirective implements OnInit, OnDestroy {
  @Input() appHasAccess: string;
  stop$ = new Subject();

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private permissionsService: PermissionsService
  ) {}

  ngOnInit(): void {
    this.permissionsService
      .checkAuthorization(this.appHasAccess)
      .pipe(takeUntil(this.stop$))
      .subscribe((authorized) => {
        if (authorized) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
          this.viewContainer.clear();
        }
      });
  }

  ngOnDestroy() {
    this.stop$.next();
  }
}

Это работает только для сценария с обновлением страницы sh. Просмотр не обновляется при изменении значения. Может ли кто-нибудь помочь мне в этом?

Answer 1

Если я правильно понял вашу проблему, вы можете установить текущее имя пользователя в PermissionService как Subject. Таким образом, служба может выдавать новые значения при изменении пользователя curren:

service.ts

export class PermissionsService {
  user = '';
  private currentUser = new Subject<string>();

  public setCurrentUser(user) {
    this.user = user;
    this.currentUser.next(user);
  }

  checkAuthorization(): Observable<boolean> {
    return this.currentUser.pipe(
      map( x => { return x === 'me'; })
    )
  }
}

В приведенном выше коде checkAuthorization является наблюдаемым для на который вы можете подписаться в своем Directive. Фактически, этот код почти такой же, как и у вас, за исключением того, что я удалил параметр:

directive.ts

  ngOnInit(): void {
    this.permissionsService.checkAuthorization()
      .pipe(takeUntil(this.stop$))
      .subscribe((authorized) => {
        this.viewContainer.clear();
        if (authorized) {
          this.viewContainer.createEmbeddedView(this.templateRef);
        }
      });
  }

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

Посмотрите эту демонстрацию, которую я сделал на основе вашего примера: https://stackblitz.com/edit/angular-fevt6t