Question

开发Angular 7 / Ionic 4应用程序（PWA）。我有一条指令，当内部文本发生更改时，可以自动将离子文本区域调整为正确的大小。

这很好用，下面的代码。但是，如果该页面是通过缓慢的网络连接（在Chrome DevTools-Network Slow 3G上模拟）呈现的，则文本会在组件加载时放到ion-textarea中（例如，编辑页面），但是指令AfterViewInit在DOM已完成，因此它无法记录正确的滚动高度，并且随后无法调整为正确的大小。

反正有没有检测到DOM /页面已经完成，所以我可以启动我的Adjust方法来正确设置高度吗？

我还尝试了ngAfterViewChecked并捕获了此事件的第一个实例，但同样可以在呈现DOM / Page之前触发。

任何帮助将不胜感激。

谢谢

罗伊

import { ElementRef, HostListener, Directive, AfterViewInit, Input } from '@angular/core';

@Directive({
  selector: 'ion-textarea[autosize]'
})

export class AutoSizeDirective implements AfterViewInit {

  @Input() MaxHeight: number;
  @HostListener('input', ['$event.target'])
  @HostListener('change', ['$event.target'])

  private _pageLoaded: boolean = false;

  onInput(textArea: HTMLTextAreaElement) {
    this.adjust(textArea);
  }
  onChange(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }

  constructor(private element: ElementRef) {}

  ngAfterViewInit() {
    setTimeout(() => this.adjust(), 50);
  }

  adjust(textArea?: HTMLTextAreaElement) {
    textArea = textArea || this.element.nativeElement.querySelector('textarea');
    if (!textArea) {
      return;
    }

    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';

    let newHeight = textArea.scrollHeight;
    if(newHeight > this.MaxHeight){
      newHeight = this.MaxHeight;
      textArea.style.overflow = 'auto';
    }


    textArea.style.height = newHeight + 'px';
  }
}

DOM / Page完全呈现后运行方法

0 个答案: