Question

我有一个页面上有几个textareas。每个textarea / checkbox组合都在子组件中。

<input type="checkbox" [(ngModel)]="cb_value" [disabled]="cb_disabled" (click)="cbClicked($event)" name="cb"/> 
<textarea [myResizeTextarea]="newText" rows="2" spellcheck="true" class="form-control" [ngModel]="textValue" (ngModelChange)="valueChange($event)" name="textarea" [readOnly]="cb_value" (keypress)="cb_disabled=true;"></textarea>

模型＆＃34; textValue＆＃34;从服务器检索并从父组件传递。

指令＆＃34; myResizeTextarea＆＃34;目前适用于textarea的更改，但初始textValue没有调整大小。

我为AfterViewInit，AfterViewChecked，AfterContentInit，AfterContentChecked和OnInit添加了处理程序。在其中我将scrollHeight输出到控制台只是为了检查它们都是textarea的默认高度。

如何根据初始内容调整高度？

这是指令：

  export class ResizeTextareaDirective implements OnInit, AfterContentChecked, AfterViewInit, OnInit, OnChanges {

  @Input() myResizeTextarea: string;  

  constructor(private el: ElementRef, private _renderer: Renderer, private changeDetectorRef: ChangeDetectorRef) {

    this.el.nativeElement.style.overflow = 'hidden';
    this.el.nativeElement.style.resize = 'none';
  }

  @HostListener('input') onInput() {
    this.resize();
  }
  @HostListener('transitionend') onTransEnd() {
    const scrollHeight = this.el.nativeElement.scrollHeight + 'px';
    console.log('transend scrollheight=' + scrollHeight);
  }
  @HostListener('blur') onChange() {
    const scrollHeight = this.el.nativeElement.scrollHeight + 'px';
    console.log('change scrollheight=' + scrollHeight);
  }

  resize() {
    const scrollHeight = this.el.nativeElement.scrollHeight + 'px';
    console.log('scrollheight=' + scrollHeight);
    this.el.nativeElement.style.height = 'auto';
    this.el.nativeElement.style.height = scrollHeight;
  }
}

提前致谢！

Answer 1

感谢您回答透辉石。我记录了高度，但不是风格。我最后用这个稍微修改了指令：

  initResize = false;
  initialScrollHeight: number;

  ngAfterContentChecked(): void {
  if (!this.initResize) {
      const scrollHeight = this.el.nativeElement.scrollHeight;
      if (scrollHeight !== this.initialScrollHeight) {
        this.resize();
        this.initResize = true;
      }
    }
  }

第二次通过contentChecked事件显示正确的scrollHeight，所以我将其入侵以使其正常工作。不理想，我肯定想知道正确的方法，但它的工作原理和足够好。我会帮助你回答你的答案！

Answer 2

尝试使用console.log（）'ing

 this.el.nativeElement.style

加载时从指令

（来自ngOnInit或ngAfterViewInit）。我敢打赌，除了你在构造函数中指定的resize和overflow值之外，你会发现它完全是空的。我不认为Angular会默认读取您拥有ElementRef的元素的所有样式，只读取已修改的元素。如果你这样做

window.getComputedStyle(this.el.nativeElement)

然后你可能会看到实际填充的所有相关样式。这种读取样式的方法虽然是一个真正的性能杀手，所以我通常会找到一些方法来计算我在父级中需要的初始样式值，并将其作为输入传递并使用HostBinding绑定到它。

如何在页面加载时调整Angular2中textarea的大小

2 个答案: