javascript - 听取 Angular 2 中的元素可见性

Question

我正在为我的网络应用程序使用 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 应该可以正常工作。