在Angular 2中聆听元素可见性

Question

我正在为我的webapp使用Bootstrap和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
    }
}

Answer 1

ngDoCheck 在运行更改检测时运行,因此我认为如果您想要监视它而不是仅在组件创建时获取一次它是正确的位置:

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

可能有更好的选择,比如在某处发生的某些事件,但是对于一般情况ngDoCheck应该可以正常工作.