如何使用HostBinding将样式绑定到组件外部的元素

Question

我想将overflow:hidden/visible添加到body标签，具体取决于模式是否可见。如果可能的话，我想用@HostBinding实现此目标，但我不知道如何做。

这就是我想要的东西：

constructor(private _modalApi: ModalApiService) {

  _modalApi.isOpen$.subscribe(
    modal => {
      this.overflow = this.isOpen ? 'hidden' : 'visible';
    }
  )
}

@HostBinding('body.style.overflow')
overflow: string;

我意识到@HostBinding绑定到host元素，在这种情况下它是模态，但是因为@HostListener可以监听文档，窗口等我认为可能有类似的用例这里。

这是可能的还是我必须做一些奇怪的解决方法？

请注意，我已经查看了其他问题，建议将您的app组件放在body标签上然后通过app组件进行，但是，我不能依赖其他组件，因为我的想法是这个组件不应该知道任何应用程序的结构，仍然可以工作。

Answer 1

不支持此功能。由于HostBinding表示它绑定到组件的主机元素，而不是某些任意元素。

document:xxx装饰器的window:xxx，body:xxx或HostListener目标是特殊的。

您可以使用纯DOM访问作为变通方法或其他方式来获取ElementRef并使用Renderer来应用样式或其他设置。