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

Question

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

的setter

get: 从模板中获取样式

set: 给组件设置值

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

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

在 ngDoCheck 中写一个 setter 或 ngAfterViewChecked 似乎会影响性能。

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/

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

Is there any 'passive' way to get element style from @ViewChild style dynamically in Angular2?

javascript

typescript

angular2-changedetection

angular