在做聊天窗口的时候遇到一个问题，就是输入框输入多行文字之后没有自动变高，现在很多流行的社交软件如微信、QQ中都至少输入4行之后才将多余的部分隐藏，所以问题来了，怎样在输入的时候输入框动态变高，当高度到达四行之后就保持不变，消息发送之后又变回原来的高度。
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.在函数内获取到dom元素，使用元素的scrollHeight属性获取元素的动态高度，并赋值给height:
updateEditor(){
let el = this.element.nativeElement.querySelector("textarea");
el.style.overflow = "hidden";
el.style.height = "auto";
if (el['scrollHeight'] <= 84) { //给输入框设定一个最大的高度
el['style'].height = el['scrollHeight'] + "px";
}else {
el['style'].height = "80px";
}
}
4.在发送完消息后将输入框变回原来的高度：
send(){
...
this.talkvalue= '';
let el = this.element.nativeElement.querySelector("textarea");
el.style.height = "25px";
}
