javascript - 如何以角度捕获任何DOM元素的调整大小事件

Question

我有两个组件。

第一个组件包含一个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调整大小时检测更改。

Answer 1

Angular 提供了HostListenerDecorator 来声明要侦听的 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

Answer 2

您可以使用该(window:resize)功能来做到这一点。

<div id="comp1" (window:resize)="yourFunction($event)">  // <-- add this code fragment
<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>