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

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

0 голосов
/ 14 января 2019

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

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

Он работает на 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 согласно приведенному выше коду.

Спасибо Rowie

Ответы [ 2 ]

0 голосов
/ 22 мая 2019

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

0 голосов
/ 22 февраля 2019

Ниже код поможет вашей проблеме. 

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

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

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

Привет.

...