gpt4 book ai didi

angular - Angular 2中的元素高度和宽度变化检测

转载 作者:太空狗 更新时间:2023-10-29 16:54:32 25 4
gpt4 key购买 nike

我一直在寻找解决方案,但没有找到(只有关于 (window:resize) 的文章,但它不是我要找的)。

如何检测 Angular 2 中的元素大小变化?

<div #myElement (sizeChanged)="callback()" />

我想使用一些 CSS 动画并检测元素的 heightwidth 变化。

最佳答案

编辑:现代答案

现代浏览器支持 ResizeObserver API .该 API 已经推出多年,现在已得到广泛支持。不幸的是,Edge 现在只支持它,因为它在 Chromium 上。如果这对您很重要,请查看旧答案或 use a polyfill .

如果您有兴趣,请看这里。你想创建一个 ResizeObserver反对并调用 observe在上面。在此示例中,蓝色 block 在我们循环文本和填充时不断调整大小。元素的当前大小被添加到无序列表中。

const btn = document.getElementById('btn');
const container = document.getElementById('container');
const output = document.getElementById('output');
btn.onclick = () => {
if (index > 2) {
if (container.className === '') {
container.className = 'high';
} else {
container.className = '';
}
index = 0;
}
container.innerText = values[index++];
}

let index = 0;
const values = [
'Short',
'Longer text',
'Very much longer text of the kind that will fill a large container',
];

function createEntry(text) {
const li = document.createElement('li');
li.innerText = text;
output.appendChild(li);
}

let obs = new ResizeObserver(entries => {
console.log(entries)
for (let entry of entries) {
const cr = entry.contentRect;
createEntry(`Element size: ${cr.width}px x ${cr.height}px`)
}
});
obs.observe(container);
#container {
display: inline-block;
background: lightblue;
}
.high {
padding: 1rem;
}
<div>
<button id="btn">Cycle</button>
</div>
<div id="container">Test This</div>
<ul id="output">
</ul>

原始答案

这个问题甚至不是 Angular 问题。更一般地说,你如何检测除window以外的任何元素的大小变化? ?有一个 onresize事件,但这仅针对 window 触发并且没有其他明显的解决方案。

许多方法的一般方法是设置一个间隔,比如 100 毫秒,然后检查 div 的宽度和高度以检测变化。尽管听起来很可怕,但这是最常见的方法。

来自 this answer对于更一般的问题,有一个库可以只使用事件来做到这一点:http://marcj.github.io/css-element-queries/ .据说,还是很不错的。您将使用 ResizeSensor得到你要找的东西。

当然,除非您只期待 div在窗口调整大小时。那么onresize正是您要找的。

关于angular - Angular 2中的元素高度和宽度变化检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40659090/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com