根据angular中文本的大小增加textarea大小

Question

目前正在使用以下代码调整文本区域的大小

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

但仅当我在 textarea 上 hover 时才会调整大小

<textarea onmousemove="autoResize(this)"></textarea>

当我打开具有文本区域的屏幕时，我想让它自动调整大小。 我已经尝试切换到 onload 但没有成功

Answer 1

export class TextAreaComponent extends OnInit { 
 @ViewChild('textarea', { read: ElementRef,static:true }) textarea: ElementRef; 
  @Input() value:string;
  rowCount: number;
  ngOnInit(): void {
    this._autoResize(this.textarea.nativeElement);
  }

  onKeyup(el) {
    this._autoResize(el);
  }
  private _autoResize(el) {
   while (el.scrollHeight > el.offsetHeight){
     el.rows += 1;
   }
  }  
}

和 textarea 组件的模板可能看起来像这样

<textarea
  #textarea
  [value]="!value ? '' : value"
  (keyup)="onKeyup(textarea)"
></textarea>

我为您创建了一些示例代码。 https://stackblitz.com/edit/angular-ivy-kxszjh?file=src%2Fapp%2Fapp.component.ts