Angular - 文本区域自动高度不会在文本删除时自动调整大小

Question

我使用以下指令来允许根据用户输入自动调整文本区域的大小：

import { ElementRef, HostListener, Directive, OnInit } from '@angular/core';

@Directive({
  selector: 'ion-textarea[autosize]'
})

export class Autosize implements OnInit {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }

  constructor(public element:ElementRef) {
  }

  ngOnInit():void {
    setTimeout(() => this.adjust(), 0);
  }

  adjust():void {
    const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
      textArea.style.height = 'auto';
      textArea.style.height = textArea.scrollHeight + "px";
      textArea.style.maxHeight = '100px';
  }
}

它按预期工作，但是当手动删除该文本区域内的文本时，文本区域不会自动调整大小。

例如如果分配给该文本区域的 [(ngModel)] 变量分配了不同的字符串或空字符串，则文本区域的高度将不会自动调整大小。用户需要再次开始输入才能使文本区域相应地调整大小。

有什么好的解决方案可以解决这个问题？

Answer 1

您可能不需要编写自己的指令。您可以使用官方 Angular CDK 中的

cdkTextareaAutosize

。

https://material.angular.io/components/input/overview#auto-resizing-code-lt-textarea-gt-code-elements

Answer 2

我正在使用这种简单的方法，当文本被删除时，文本区域确实会缩小：

<textarea (keyup)="autoGrowTextZone($event)"></textarea>

和

autoGrowTextZone(e) {
  e.target.style.height = "0px";
  e.target.style.height = (e.target.scrollHeight + 25)+"px";
}

Answer 3

尝试添加这样的内容：

ngAfterContentChecked(): void {
    this.adjust();
}

或者只使用这个库：ngx-autosize:)

更新
使用 ngAfterContentChecked 挂钩的解决方案仍然有效，但如果使用太频繁，可能会影响应用程序速度...

另一种方法是将 ngModel 视为输入，这将让你依赖 ngOnChanges 钩子，所以在你的指令中尝试添加：

...
@Input('ngModel') text: any;
...
ngOnChanges(changes) {
    if (changes.text) {
        this.adjust();
    }
}

Answer 4

Chtioui Malek 提供的解决方案在 Angular 18 中就像魅力一样。

对于想要添加最大高度的人，请找到以下分辨率：

autoGrowTextZone(event : any) {
event.target.style.height = "0px";
event.target.style.height = (event.target.scrollHeight + 25) + "px";
event.target.style.maxHeight = "200px";

Answer 5

您不需要找到文本区域，使用：

this.element.nativeElement.style.height = 'auto';
this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + 'px';
this.element.nativeElement.style.maxHeight = '100px';