Angular中如何实现textarea根据文本内容自动调整尺寸？

问题原因 #

<textarea> 属于普通表单元素，本身不支持 onload 事件，所以你修改触发事件后不会生效，只有 body、img、script、iframe 这类需要加载外部资源的元素才会触发 load 事件。

Angular 正确实现方案 #

1. 优化自适应方法

原来的方法仅支持内容增加时拉伸，没有处理内容减少时高度回落的逻辑，先做优化：

autoResize(el: HTMLTextAreaElement) {
  // 先重置行数为1，适配内容减少的场景
  el.rows = 1;
  while (el.scrollHeight > el.offsetHeight) {
    el.rows += 1;
  }
}

2. 组件类中添加初始化触发逻辑

通过 Angular 的视图查询拿到 textarea 元素，在视图渲染完成后自动触发一次适配：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  // 查询模板中的textarea元素
  @ViewChild('autoResizeTextarea') textarea!: ElementRef<HTMLTextAreaElement>;

  // 视图初始化完成后触发第一次适配
  ngAfterViewInit(): void {
    this.autoResize(this.textarea.nativeElement);
  }

  autoResize(el: HTMLTextAreaElement) {
    el.rows = 1;
    while (el.scrollHeight > el.offsetHeight) {
      el.rows += 1;
    }
  }
}

3. 模板绑定事件

模板中给 textarea 加模板引用变量，同时绑定 input 事件处理用户输入时的动态适配：

<textarea 
  #autoResizeTextarea
  (input)="autoResize($event.target as HTMLTextAreaElement)"
>默认文本内容</textarea>

如果你的 textarea 绑定了表单数据，建议在表单赋值完成后额外调用一次 autoResize 方法，避免异步加载的内容适配不及时。

内容的提问来源于stack exchange，提问作者Kaike