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

例如，模板中有一个使用局部变量#targetElement的元素，该变量的目的是在需要时获取其当前宽度。但我不想以编程方式计算样式。尝试使用带有@viewchild注释的setter
获取：从模板获取样式
set：设置组件的值

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

但是它只能得到一个0，并且在调整页面大小或对窗口进行任何更改时不会更新。所以，问题是如何在任何时候被动地将#targetElement设置到组件中？
在ngDoCheck或ngAfterViewChecked中编写setter似乎会扼杀性能。

最佳答案

您可以使用resizeobserver
resize observer是一个新的javascript api，与其他observer api（如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：它类似于元素的document.onresize
文档：https://developers.google.com/web/updates/2016/10/resizeobserver
检查这个：https://www.sitepen.com/blog/2018/06/04/exploring-the-resize-observer-proposal/

关于javascript - 在Angular2中是否有任何“被动”方式从@ViewChild样式动态获取元素样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51861558/