在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應該能正常運行的一些事件。