根據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