Question

我正在创建一个自定义指令来隐藏某些条件下的元素，但它不能按照我发现谷歌搜索的指令工作。

所有其他工作正常但元素不影响显示属性

//use of directive
<div manAuthorized [permission]="'permission-string'" class="col-2 data-object-link">

// actual directive

@Directive({
  selector: '[manAuthorized]'
})
export class AuthorizedDirective implements OnInit {

  @Input() permission: string;
  private userObservable: Observable<UserAuthorizations>;
  private currentUser: any;

  constructor(private elementRef: ElementRef, private configService: ConfigService, private currentUserService: CurrentUserService) {
    this.userObservable = this.currentUserService.getCurrentUser();
  }

  ngOnInit(): void {
    this.userObservable.subscribe((user) => {
      this.currentUser = user;
      if (!this.authorized()) {
        this.elementRef.nativeElement.display = 'none';
      }
    });
  }

  private authorized() {
    return true;
  }
}

Answer 1

您需要处理已显示的样式属性。当你试图直接设置显示时，它不起作用。

[ts] Property 'disabled' does not exist on type 'Element'.

Answer 2

constructor(private ref: ElementRef<HTMLElement>) {}
ngAfterViewInit(): void {
  if (isTeamsWindow()) this.ref.nativeElement?.remove();
}

应该这样做，但奇怪的是 viewContainerRef 不起作用。

Angular 4自定义指令隐藏元素不起作用

2 个答案: