如何在 angular 中捕獲任何 DOM 元素的調整大小事件

Question

我有兩個組件。

第一個組件包含一個帶有textara控件的form ，第二個組件包含一個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

您可以使用(window:resize) function 來做到這一點。

<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>

Answer 2

Angular 提供了HostListener裝飾器，它聲明了要監聽的 DOM 事件，並提供了在window 調整大小事件發生時運行的處理程序方法。

如下

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 package 提供的custom directive 。 您可以直接使用 package 或從此處復制directive源代碼並在您的項目中使用它。