在做聊天窗口的時(shí)候遇到一個(gè)問(wèn)題，就是輸入框輸入多行文字之后沒(méi)有自動(dòng)變高，現(xiàn)在很多流行的社交軟件如微信、QQ中都至少輸入4行之后才將多余的部分隱藏，所以問(wèn)題來(lái)了，怎樣在輸入的時(shí)候輸入框動(dòng)態(tài)變高，當(dāng)高度到達(dá)四行之后就保持不變，消息發(fā)送之后又變回原來(lái)的高度。

1.html中給texteara添加input事件：

<ion-textarea  cols="30" rows="1"  [(ngModel)]='talkvalue'  (input)="updateEditor()"></ion-textarea> 

2.在ts中注入ElementRef模塊，并引入：

import { ElementRef } from '@angular/core';
export class ChatPage {
  constructor(public element :ElementRef){
  }
}

3.在函數(shù)內(nèi)獲取到dom元素，使用元素的scrollHeight屬性獲取元素的動(dòng)態(tài)高度，并賦值給height:

updateEditor(){
  let el = this.element.nativeElement.querySelector("textarea");
  el.style.overflow = "hidden";
  el.style.height = "auto";
  if (el['scrollHeight'] <= 84) { //給輸入框設(shè)定一個(gè)最大的高度
        el['style'].height = el['scrollHeight'] + "px";
  }else {
       el['style'].height = "80px";
  }
}

4.在發(fā)送完消息后將輸入框變回原來(lái)的高度：

send(){
  ...
  this.talkvalue= '';
  let el = this.element.nativeElement.querySelector("textarea");
  el.style.height = "25px";
}