Существует ли какой-либо "пассивный" способ получить стиль элемента из @ViewChild style динамически в Angular2?

Например, в шаблоне есть элемент, использующий локальную переменную #targetElement, которая стремится получить свою текущую ширину, когда ей это нужно. Но я не хочу программно вычислять стиль. Пробовал с сеттером с аннотацией @ViewChild

Get: получить стиль из шаблона

Set: установить значение компонента 

@ViewChild('targetElement')
set imgWidth(content: ElementRef) {
  if (content) {
    console.log('Current width is: ' + content.nativeElement.clientWidth);
  }
}

Но он может получить только 0 и не будет обновляться при изменении размера страницы или любых изменениях в окне. Итак, вопрос в том, как я могу пассивно установить #targetElement в мой компонент в любое время?

Напишите сеттер в ngDoCheck или ngAfterViewChecked, кажется, убивая производительность.

1 2
javascript typescript angular2-changedetection

1 ответ:

Вы можете использовать resizeObserver

Resize Observer-это новый JavaScript API, который очень похож на другие API observer, такие как Intersection Observer API. Это позволяет уведомлять элементы, когда их размер изменяется.

Установите polyfill, который может использоваться для браузеров обратно в Internet Explorer 11

npm i resize-observer-polyfill

var observer = new ResizeObserver( resizeObserverEntries => {
    for (let entry of resizeObserverEntries) {
        const rect = entry.contentRect;
        console.log('Element:', entry.target);
        console.log(`Element size: ${rect.width}px x ${rect.height}px`);
        console.log(`Element padding: ${rect.top}px ; ${rect.left}px`);
    }
});

Стакблиц: https://stackblitz.com/edit/resize-observer

ResizeObserver: это как документ.onresize для Элементы Документация: https://developers.google.com/web/updates/2016/10/resizeobserver Проверьте это: https://www.sitepen.com/blog/2018/06/04/exploring-the-resize-observer-proposal/

1