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

【问题标题】：Angular 4 custom directive to hide element is not working隐藏元素的 Angular 4 自定义指令不起作用
【发布时间】：2022-01-07 01:22:53
【问题描述】：

我正在创建一个自定义指令以在某些条件下隐藏元素，但它没有按照我在谷歌上搜索到的指令工作。

其他一切正常，但元素不影响显示属性

指令的使用：

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

实际指令：

@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;
  }
}

【问题讨论】：

在我看来，更好的方法是在这里使用 viewcontainerref.clear() 一个很好的例子netbasal.com/…
另一个显示替代方法的帖子：stackoverflow.com/questions/43517660/…

标签： angular

【解决方案1】：

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

this.elementRef.nativeElement.style.display = 'none';

【讨论】：

网上很多例子都是直接调用display。让我试试这个。
可能是 Angular 的旧版本。
我试图使用viewContainerRef.clear() 调用，但它不起作用。您的解决方案确实有效。

【解决方案2】：

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

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

【讨论】：