在 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 应该没问题。

Answer 2

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

在 Angular 2 中收听元素可见性

Listen to element visibility in Angular 2

javascript

listener

angular