javascript - 是否有任何 'passive' 方法可以在 Angular2 中动态地从 @ViewChild 样式获取元素样式？

Question

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

get: 从模板中获取样式

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，它与其他观察者 API(如 Intersection Observer 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:就像元素的 document.onresize文档:https://developers.google.com/web/updates/2016/10/resizeobserver检查这个:https://www.sitepen.com/blog/2018/06/04/exploring-the-resize-observer-proposal/