聆听 Angular 2 中的元素可见性答案

【问题标题】：Listen to element visibility in Angular 2聆听 Angular 2 中的元素可见性
【发布时间】：2017-03-28 20:34:24
【问题描述】：

我正在为我的 web 应用程序使用 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
    }
}

【问题讨论】：

你应该使用组件的主机属性
@BabarBilal 请提出你的答案...
它是如何隐藏或显示的？当元素变得不可见时，浏览器不提供任何事件，因此 Angular 也不提供。
@GünterZöchbauer 就像问题中提到的那样，在父母中使用.hidden-sm-up。
所以它是纯 CSS。您只能通过迭代父母进行轮询并检查 display 属性以获取 hidden 或您在 CSS 中应用的任何内容。

标签： javascript angular listener

【解决方案1】：

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

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

可能有更好的选择，例如在某处发出的某些事件，但对于一般情况，ngDoCheck 应该可以正常工作。

【讨论】：

很遗憾ngDoCheck在调整浏览器大小时没有触发...
您可以在ngDoCheck() 之前添加@HostBinding('window:resize') 就可以了。
我不知道如何使用HostBinding...我应该把ngDoCheck放在括号内吗？
应该是Hostlistener 而不是HostBinding
@GünterZöchbauer 我对这个话题的理解有限，所以我的问题可能没有意义。在ngDoCheck 中调用offsetParent 是否会强制浏览器重新计算布局？似乎这可能与默认更改检测策略有问题。或者那个时候布局已经计算好了？我知道修改 ngDoCheck 中的 DOM 可能不好。

【解决方案2】：

我发现了一个不错的博客。 HostListener 有 visible 事件。 https://netbasal.com/with-great-angular-components-comes-great-single-responsibility-5fa37c35ad20

【讨论】：