javascript - 如何以角度捕获任何DOM元素的调整大小事件
问题描述
我有两个组件。
第一个组件包含一个form
带textara
控件,第二个组件包含一个SVG
图表。但是,当用户在textarea
控件中添加更多详细信息并且由于该表单元素的大小被调整时,我想检测它以使我的SVG
图表与该更改对齐。
<div id="comp1">
<form action="/action_page.php" id="usrform">
<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>
</form>
<div>
<div id="comp2">
</div>
我想在comp1
调整大小时检测更改。
解决方案
Angular 提供了HostListener
Decorator 来声明要侦听的 DOM 事件,并提供一个处理程序方法以在该窗口调整大小事件发生时运行。
如下
import {HostListener} from '@angular/core';
class AppComponent{
@HostListener('window:resize', ['$event'])
resize(event) {
console.log(event);
}
}
如果您想在 div resize 上触发 resize 事件,则可以按照https://www.npmjs.com/package/angular-resize-event包custom directive
提供的方式创建。您可以直接使用该包或从此处复制源代码并在您的项目中使用它。directive
推荐阅读
- scala - 在 Scala 中声明 var 不是 null 或 None
- javascript - 如何在我的字符串长度计数中包含非 spintax 内容?
- python - 在日期列的选择性时间段中添加 1 天
- ios - 如何修复:“致命错误:在隐式展开可选值时意外发现 nil”
- java - 如何从 bytearray 创建 unicode 字符串
- android - 使用 ViewPager2 获取当前片段
- zend-framework3 - Zend 框架 3 路由器在单独的文件中(不在配置数组树中)
- r - 我的数据是否适合嵌套的方差分析/线性混合效应模型,应该如何编写公式?
- python - 比较“float('nan')”和“math.nan”
- c# - ASMX Webservice - 启用 HTTP POST [405 方法不允许]