Невозможно получить nativeElement of ion-textarea в Ionic 4 для установки высоты

Question

У меня есть пользовательская директива, чтобы настроить высоту ion-textarea для автоматического изменения высоты при вводе текста, а не устанавливать фиксированную высоту строки или иметь некрасивые полосы прокрутки при заполнении текстовой области.

В Ionic-4 я не могу получить нативный элемент html-текстовой области иона-текстовой области. Любая помощь будет отличной

Он работает на Angular 6 и Ionic 4, но когда я пытаюсь получить this.element.nativeElement.getElementsByTagName('textarea')[0], он всегда не определен, поэтому я не могу установить высоту программно.

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 {

  @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.scrollHeight + 'px';
  }
}

Использование: <ion-textarea autosize></ion-textarea>

Я подтвердил это на Ionic 4.0.2/Angular 7.2.6,

С уважением.

Answer 2

Этот пакет выполняет для меня все автоматические изменения размеров моих ионных текстовых полей https://github.com/chrum/ngx-autosize, просто следуйте руководству и заставьте его работать, если он не работает, импортируя его в app.module.ts затем попробуйте импортировать его в модуль страницы, мне лично понадобился этот незнаю, если хотите, но пакет спасает жизнь