Обнаружение изменения высоты и ширины элемента в Angular 2

Question

Я искал решение, но ничего не найдено (только статьи о (window:resize), но это не я ищу).

Как определить изменение размера элемента в Angular 2?

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

Я хочу использовать некоторые CSS анимации и обнаружения height и width изменения элемента.

Answer 1

Проблема не проблема с угловым 2. В более общем плане, как вы определяете изменения размера в любом элементе, отличном от window? Существует событие onresize, но это срабатывает только для window, и других очевидных решений нет.

Общий способ, которым многие подходят к этому, - установить интервал, скажем, 100 мс, и проверить ширину и высоту div, чтобы обнаружить изменение. Как это ни ужасно, это самый распространенный подход.

От this answer к более общему вопросу, есть библиотека для этого, используя только события: http://marcj.github.io/css-element-queries/. Предположительно, это неплохо. Вы должны использовать ResizeSensor, чтобы получить то, что ищете.

Если вы, конечно, не ожидаете изменения размера div, когда это делает окно. Тогда onresize - это то, что вы ищете.