如何使用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結合，在這種情況下，將模態主元素，但由於@HostListener可以聽文件，窗口等我想這裏可能有類似的用例。

這是可能的還是我必須做出一些奇怪的解決方法？

請注意，我已經查看了其他問題，建議將您的應用程序組件放在body標籤上，然後通過應用程序組件進行操作，但是我不能依賴另一個組件，因爲這個組件應該不知道任何應用程序的結構，仍然工作。

Answer 1

這不支持。由於HostBinding表示它綁定到組件的主機元素，而不是某個任意元素。

document:xxx,window:xxx或body:xxx裝飾者的目標HostListener是特殊的。

您可以使用普通DOM訪問作爲解決方法或其他方式來獲取ElementRef並使用Renderer來應用樣式或其他設置。