Angular Material Textarea页面加载时尺寸异常问题求助

我之前处理过一模一样的Angular Material文本域问题，咱们来拆解一下原因和解决办法：

可能的原因 #

• ng-template的惰性渲染导致初始化时机不对：ng-template里的元素是延迟渲染的，页面初始加载时这个textarea还没真正挂载到DOM中，CDK的cdkTextareaAutosize指令在初始化阶段没法获取到元素的真实尺寸和文本内容高度，所以计算出的高度偏小，自然就截断了内容。
• 异步内容填充与指令初始化不同步：如果textarea的内容是通过接口请求异步加载的，指令初始化时内容还没填充进去，此时计算的高度是基于空内容或者不完整内容的。而调整窗口/打开控制台会触发resize事件，CDK会监听这个事件重新计算高度，这时候内容已经加载完成，所以就能正常显示了。
• DOM布局未稳定时的初始计算：页面加载初期可能还有其他元素在渲染、布局调整，textarea的实际尺寸还没稳定，指令的初始高度计算就已经完成，导致结果不准确。

可行的解决方法 #

1. 手动触发autosize的重新计算 #

通过组件的视图钩子或者数据加载完成的回调，调用CDK autosize的resizeToFitContent()方法，强制重新计算高度。

组件代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CdkTextareaAutosize } from '@angular/cdk/text-field';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('autosize') autosize!: CdkTextareaAutosize;
  yourTextContent: string = '';

  ngAfterViewInit(): void {
    // 如果是同步内容，用setTimeout确保DOM已更新
    setTimeout(() => {
      this.autosize.resizeToFitContent(true);
    }, 0);
  }

  // 异步加载内容的回调示例
  loadTextContent(): void {
    // 模拟接口请求
    fetch('/api/get-content')
      .then(res => res.text())
      .then(content => {
        this.yourTextContent = content;
        // 内容填充后立即触发重新计算
        setTimeout(() => {
          this.autosize.resizeToFitContent(true);
        }, 0);
      });
  }
}

2. 监听模板渲染完成事件 #

因为textarea在ng-template中，我们可以在视图检查钩子中判断模板是否渲染完成，然后触发重新计算，同时避免无限循环：

import { Component, ViewChild, AfterViewChecked } from '@angular/core';
import { CdkTextareaAutosize } from '@angular/cdk/text-field';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewChecked {
  @ViewChild('autosize') autosize!: CdkTextareaAutosize;
  private hasTriggeredResize = false;

  ngAfterViewChecked(): void {
    // 确保autosize已初始化且只触发一次
    if (!this.hasTriggeredResize && this.autosize) {
      setTimeout(() => {
        this.autosize.resizeToFitContent(true);
        this.hasTriggeredResize = true;
      }, 0);
    }
  }
}

3. 延迟渲染textarea直到内容就绪 #

通过条件渲染，确保文本内容已经加载完成后再渲染textarea，这样指令初始化时就能拿到完整内容，计算出正确的高度：

<ng-template [ngIf]="yourTextContent">
  <textarea 
    matInput 
    cdkTextareaAutosize 
    #autosize="cdkTextareaAutosize" 
    cdkAutosizeMinRows="1" 
    cdkAutosizeMaxRows="25"
    [(ngModel)]="yourTextContent"
  ></textarea>
</ng-template>

总结 #

核心思路就是让cdkTextareaAutosize指令在DOM完全挂载、文本内容稳定之后再执行高度计算，因为它的初始计算是在指令初始化阶段完成的，而惰性渲染或异步内容会打乱这个时机。上面的方法都能解决这个问题，你可以根据自己的场景选择最合适的一种。

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