无法在 Ionic 4 中获取 ion-textarea 的 nativeElement 来设置高度

Question

我有一个自定义指令来调整 ion-textarea 高度以在输入文本时自动调整高度，而不是设置固定的行高或在 textarea 填满时使用丑陋的滚动条。

在 Ionic-4 中，我无法获得 ion-textarea 的 html textarea 的 nativeElement。任何帮助都会很棒

它在 Angular 6 和 Ionic 4 上是运行但是当我尝试获取 this.element.nativeElement.getElementsByTagName('textarea')[0] 它总是未定义的所以我不能t 以编程方式设置高度。

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

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

export class AutosizeDirective implements OnInit {
  @HostListener('input', ['$event.target'])
  onInput(textArea:HTMLTextAreaElement):void {
    this.adjust();
  }

  constructor(public element:ElementRef) {
  }

  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';
  }
}

由于 const textArea 返回时总是未定义，我无法将高度设置为跟随滚动高度以防止出现滚动条。

有人能在 Ionic-4 中做到这一点吗？根据上述代码在 Ionic-3 中查看工作示例。

谢谢罗威

Answer 1

下面的代码可以解决您的问题。

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

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

export class AutoSizeDirective implements AfterViewInit {
  readonly defaultHeight = 64;

  @HostListener('input', ['$event.target'])
  onInput(textArea: HTMLTextAreaElement) {
    this.adjust(textArea);
  }

  constructor(private element: ElementRef) {}

  ngAfterViewInit() {
    this.adjust();
  }

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

    if (!textArea) {
      return;
    }

    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    textArea.style.height = (textArea.value ? textArea.scrollHeight : defaultHeight) + 'px';
  }
}

Usage: <ion-textarea autosize></ion-textarea>

我已经在 Ionic 4.0.2/Angular 7.2.6 上确认了。

此致。

Answer 2

这个包为我 https://github.com/chrum/ngx-autosize 自动调整了我的 ion-textareas 只需按照指南进行操作即可，如果它无法将其导入 app.module.ts 然后尝试将其导入页面的模块，如果您愿意，我个人需要它，但包是一个救生员

无法在 Ionic 4 中获取 ion-textarea 的 nativeElement 来设置高度

Unable to get nativeElement of ion-textarea in Ionic 4 to set height

angular-directive

elementref

ionic4