Javascript 聆听Angular 2中的元素可见性

我正在为我的webapp使用引导和Angular 2（v4）。我想听听关于可见性更改的指令中的一个元素。我的元素有一个父元素，它可以使用

hidden sm up

隐藏它的子元素，我需要在每次隐藏或显示它时触发一个函数

div.hidden-sm-up
   input.form-control(myDirective, type='number')

在我的指示中：

@Directive({
    selector: '[myDirective]'
})

export class myDirective {
    constructor(private element: ElementRef, private renderer: Renderer){

    }

    ngAfterViewInit(): void{
        // listen to visibility change here
    }
}

---

ngDoCheck

在运行更改检测时运行，因此我认为如果您想监控它，而不是在组件创建时只获取一次，它是正确的位置：

@HostListener('window:resize')
ngDoCheck() {
  this.isVisible = this.element.nativeElement.offsetParent !== null;
}

---

可能有更好的选择，比如一些在某处发出的事件，但对于一般情况，

ngDoCheck

应该可以正常工作。

我发现了一个不错的博客<代码>主机侦听器具有可见的

事件
 您应该使用的主机属性component@BabarBilal请开发您的答案…它是如何隐藏或显示的？当元素不可见时，浏览器不提供任何事件，因此Angular也不提供该事件。@GünterZöchbauer如问题中所述，在父元素中使用
.hidden sm up
。因此它是纯CSS。您只能通过迭代父项进行轮询，并检查
hidden
或CSS中应用的任何内容的
display
属性。不幸的是，调整浏览器大小时不会触发
ngDoCheck
。您只需在
ngDoCheck（）之前添加
@HostBinding（'window:resize'）
就可以了。我不知道如何使用主机绑定。。。我应该把
ngDoCheck
放在括号里吗？应该是
Hostlistener
而不是
HostBinding
@GünterZöchbauer我对这个话题的理解是有限的，所以我的问题可能没有意义。在
ngDoCheck
中调用
offsetParent
是否会强制浏览器重新计算布局？似乎默认的更改检测策略可能会有问题。或者布局是否已在该点计算？我知道在
ngDoCheck
中修改DOM可能不好。