关于Directive指令的使用

应用场景：当输入内容需要动态适应的时候，我们可以创建一个指令来动态改变textarea的高度
1.创建指令
ionic g directive autosize

2. 修改生成的指令文件
   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';
}
}
3.如果调用的页面用了懒加载，在调用指令的页面module.ts里导入指令并声明，
@NgModule({
declarations: [
DailyPage,
AutosizeDirective
],
imports: [
IonicPageModule.forChild(DailyPage),
],
})
export class DailyPageModule {}

4. 测试
   <ion-item>
   <ion-textarea name="dummyText" [(ngModel)]="dummyText" autosize></ion-textarea>
   </ion-item>
   、