這指令不是我發(fā)明的煤痕，國外看到的阿宅，找個地方記錄一下敌蚜。關(guān)于指令的一些簡單說明桥滨，可以看我這篇文章：【開發(fā)指南】（五）ionic3應(yīng)該善用組件和指令。
假如對指令有所了解了，那首先創(chuàng)建一個指令：
ionic g directive autosize
打開文件編輯：
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[autosize]' // Attribute selector
})
export class AutosizeDirective {
@HostListener('input', ['$event.target'])
onInput(textArea:HTMLTextAreaElement):void {
this.adjust();
}
constructor(public element:ElementRef) {
console.log('Hello AutosizeDirective Directive');
}
ngOnInit():void {
setTimeout(() => this.adjust(), 0);
}
adjust():void {
const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0];
textArea.style.overflow = 'hidden';
textArea.style.height = 'auto';
textArea.style.height = textArea.scrollHeight + 'px';
}
}
然后隨便找個html頁面齐媒，加上下面這些內(nèi)容測試看下效果酸舍，效果圖我就不上了：
<ion-item>
<ion-textarea name="dummyText" [(ngModel)]="dummyText" autosize></ion-textarea>
</ion-item>
原理就是監(jiān)聽input事件，每次輸入后執(zhí)行
adjust方法調(diào)整樣式里初。
