Angular 2中的元素高度和寬度變化檢測

Question

我正在尋找解決方案，但沒有發現任何東西（只有關於(window:resize)的文章，但它不是我正在尋找的）。

如何檢測Angular 2中元素大小的變化？

<div #myElement (sizeChanged)="callback()" /> 

我想用一些CSS動畫和檢測元件的height和width變化。

Answer 1

問題甚至不是Angular 2問題。更一般地說，您如何檢測除window以外的任何元素的尺寸變化？有一個onresize事件，但這只是由window觸發的，並且沒有其他明顯的解決方案。

許多方法的一般方法是設置100ms的間隔並檢查div的寬度和高度以檢測更改。聽起來很可怕，這是最常見的方法。

從this answer到更一般的問題，有一個庫僅使用事件來做到這一點：http://marcj.github.io/css-element-queries/。據說，這很好。你可以使用ResizeSensor來獲得你要找的東西。

除非當然，你只希望div調整窗口的大小。然後onresize是你在找什麼。