Question

我想实时检查<textarea>的宽度和高度，而不是在释放点击后实时调整其大小，因此我尝试使用Angular-resize-event。但它无法解决，似乎仅适用于<div>而不适用于<textarea>。我还尝试将<textarea>包装在<div>中，但这仅对Height参数的更改无效，而宽度保持不变。为什么会这样呢？还有另一种方法吗？她是我的密码：

HTML

     <div (resized)='onResize($event)'><textarea #resizable></textarea>      
     </div>
<div><span> HEIGHT : {{height}} </span> WIDTH : {{width}} </div>

Component.ts

  import { Component, ViewChild, ElementRef } from '@angular/core';
import { ResizedEvent } from 'angular-resize-event';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  @ViewChild('resizable') box: ElementRef ;



  onResize(event:ResizedEvent) {
    this.height =  event.newHeight;

    this.width = event.newWidth;
    }


}

Answer 1

它未检测到您的父<div>的宽度变化的原因是，默认情况下，父<div>的宽度似乎设置为100％。您将需要使用css属性display，并将值设置为inline-block。

<div (resized)="onResize($event)" style="display:inline-block">
  <textarea #resizable></textarea>      
</div>

这样，resized事件应该能够捕获宽度和高度的变化！

我已通过here分叉并为您重新创建了演示。希望它能解决您的问题。

角调整大小事件不适用于textarea

1 个答案: