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应该可以正常工作。

Answer 2

我在这方面找到了不错的博客。 HostListener 有 visible 事件。 https://netbasal.com/with-great-angular-components-comes-great-single-responsibility-5fa37c35ad20

在Angular 2中聆听元素可见性

2 个答案: