如何获取超级父div宽度并基于超级父div宽度设置子和父div宽度

Question

我正在尝试在angular 4中构建一个自定义指令，以将div的大小调整为div。

这是我的HTML代码：

<div class="super-parent">
    <div class="parent">
        My Div content
        <div class="child" resizer></div>
    </div>
</div>

我的指令方法是：

  resizer(offsetX: number) {
    this.width += offsetX;
    this.el.nativeElement.parentNode.style.width = this.width + "px";
  }

在这里，在设置父节点宽度之前，我希望检查超级父div宽度中的该宽度百分比。 有可能吗？

提前致谢...

Answer 1

使用可以像这样在jQuery中实现

$(this).parent().parent().width();

Answer 2

我用下面的普通Java脚本完成了此操作

this.el.nativeElement.parentNode.parentNode.style.width

Answer 3

使用调整大小观察器获取父Div宽度并动态设置子级

有关PollyFill的FormoreInfo： https : //developers.google.com/web/updates/2016/10/resizeobserver

ResizeObserver是一个事件处理程序，它接收根据该句柄而更改的DOM节点数组。

首先安装polyfill调整大小观察器

npm install resize-observer-polyfill --save-dev

然后导入polyfill.ts

import * as ResizeObserver from 'resize-observer-polyfill';

然后使用ResizeObserver动态设置div的宽度

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

observer.observe(domElement);
observer.observe(anotherDomElement);