javascript - 当宽度按百分比设置时如何检测 HTMLElement 调整大小

Question

我正在开发一个 Angular 组件，并且使用这个 css 代码。

:host {
  display: block;
  width: 100%;
}

我们的想法是让组件尽可能响应。

我的问题是，每当我的组件宽度发生变化时，我都需要执行一些逻辑。首选方式 (MutationObserver) 不适用于按百分比设置的组件宽度，因为如果 with 发生变化，它将始终为 100%，因此突变观察者的回调不会被触发。

我在某处读到过有关将逻辑放入 DoCheck licycle Hook 的内容，有人可以告诉我是否还有其他好方法可以完成我需要的操作？

Answer 1

我认为你有两个选择:

1. 使用window.addEventListener('resize', reportWindowSize);在第一次加载时，您必须保存div的原始尺寸，当窗口大小调整时，您检查原始尺寸与当前尺寸div 的尺寸，如果更改则执行您的自定义逻辑。
2. 关注此CSS Element Queries该主题中描述的库。