ionic3-输入框动态缩放

在做聊天窗口的时候遇到一个问题，就是输入框输入多行文字之后没有自动变高，现在很多流行的社交软件如微信、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";
}