Question

例如，模板中有一个使用局部变量#targetElement的元素，该变量旨在在需要时获取其当前宽度。但我不想以编程方式计算样式。尝试使用带有@ViewChild批注的二传手

获取：从模板获取样式

set：将值设置为组件

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

但是它只能得到0，并且在调整页面大小或对窗口进行任何更改时不会更新。因此，问题是如何随时可以将#targetElement被动地设置到组件中？

在ngDoCheck或ngAfterViewChecked中写一个setter似乎会降低性能。

Answer 1

您可以使用resizeObserver

Resize Observer是一个新的JavaScript API，与诸如Intersection Observer API之类的其他观察者API非常相似。它允许在元素大小改变时得到通知。

安装可用于浏览器回到Internet Explorer 11的polyfill

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`);
    }
});

StackBlitz：https://stackblitz.com/edit/resize-observer

ResizeObserver：类似于Elements的document.onresize 说明文件：https://developers.google.com/web/updates/2016/10/resizeobserver 检查以下内容：https://www.sitepen.com/blog/2018/06/04/exploring-the-resize-observer-proposal/

在Angular2中是否有任何“被动”方式从@ViewChild样式动态获取元素样式？

1 个答案: