Angular - Textarea 自动高度不会在文本删除时自动调整大小答案

【问题标题】：Angular - Textarea auto height does not automatically resize on text deletionAngular - Textarea 自动高度不会在文本删除时自动调整大小
【发布时间】：2018-12-27 20:16:42
【问题描述】：

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

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';
  }
}

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

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

什么是解决这个问题的好方法？

【问题讨论】：

标签： angular dynamic resize textarea refresh

【解决方案1】：

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

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

和

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

尝试添加如下内容：

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

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

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

另一种方法是将 ngModel 视为输入，这将让您依赖 ngOnChanges 挂钩，因此在您的指令中尝试添加：

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

【讨论】：

【解决方案4】：

你不需要找到 textArea，使用：

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

【讨论】：