Ionic中ion-textarea自动调整高度指令报错排查

看起来你遇到的核心问题有两个：一是指令注册方式错误，二是在DOM未完全渲染时尝试获取内部textarea导致返回null。咱们一步步来修复：

1. 修正指令的注册方式 #

你把Autoresize指令加到了providers数组里，这是错误的！Angular的属性指令（Attribute Directive）只需要在declarations中声明即可，不需要放到providers里。把它从providers中移除：

// app.module.ts
@NgModule({
 declarations: [ MyApp, HomePage, Autoresize ],
 imports: [ BrowserModule, IonicStorageModule.forRoot(), HttpModule, HttpClientModule, IonicModule.forRoot(MyApp) ],
 bootstrap: [IonicApp],
 entryComponents: [ MyApp, HomePage ],
 providers: [ 
   StatusBar, 
   // 移除这一行：Autoresize,
   {provide: ErrorHandler,useClass: IonicErrorHandler}, 
   Auth, 
   ApiServiceProvider 
 ]
})
export class AppModule {}

2. 调整生命周期钩子，确保DOM渲染完成再获取元素 #

ngOnInit钩子执行时，Ionic的ion-textarea组件可能还没完成内部DOM的渲染，这时候用querySelector自然找不到内部的textarea元素。我们换成ngAfterViewInit钩子，它会在视图及其子视图完全初始化后执行：

// autoresize.directive.ts
import { Directive, HostListener, ElementRef, AfterViewInit } from "@angular/core";

@Directive({ selector: "ion-textarea[autoresize]" })
export class Autoresize implements AfterViewInit { // 实现AfterViewInit接口
 @HostListener("input", ["$event.target"]) onInput(textArea: HTMLTextAreaElement): void { 
   this.adjust(); 
 }

 constructor(public element: ElementRef) { }

 ngAfterViewInit(): void { // 替换ngOnInit为ngAfterViewInit
   // 用setTimeout确保ngModel绑定的初始值已渲染到textarea
   setTimeout(() => this.adjust(), 0);
 }

 adjust(): void {
   // 先检查元素是否存在，避免报错
   const ta = this.element.nativeElement.querySelector("textarea");
   if (!ta) return;

   ta.style.overflow = "hidden";
   ta.style.height = "auto";
   ta.style.height = ta.scrollHeight + "px";
 }
}

3. 额外优化：处理窗口变化场景 #

如果窗口大小变化时需要重新调整textarea高度，可以添加窗口 resize 监听：

// 在指令中新增HostListener
@HostListener("window:resize") onResize(): void {
  this.adjust();
}

这样调整后，你的自动调整高度指令应该就能正常工作了——内部的textarea元素能被正确获取，高度也会随着输入内容自动变化。

内容的提问来源于stack exchange，提问作者user8231819