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

【问题标题】：Unable to get nativeElement of ion-textarea in Ionic 4 to set height无法在 Ionic 4 中获取 ion-textarea 的 nativeElement 来设置高度
【发布时间】：2019-06-07 23:59:26
【问题描述】：

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

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

它在 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 总是返回 undefined 我无法设置高度以跟随滚动高度以防止滚动条。

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

谢谢罗伊

【问题讨论】：

所以这里的这个方法：getElementsByTagName() 要求在正确的 DOM 元素上使用这个指令。您要在哪些 html 元素或组件（如果自定义）上应用此指令？ Ionic 4 的重大变化是从 angular 组件转移到 ionic web 组件。因此，为了理想地对这个问题进行分类，请分享您在哪个 ionic 3 组件上使用了该指令，并且它与 ionic 4 相比有效
我在 Ionic 4 ion-textarea 上使用它 - 所以是 TextArea 组件。我对 Ionic 是全新的，所以只在版本 4 上完成了此操作，并且在版本 3 上没有示例可以比较，除了当我发现此代码在在线示例中工作时，所以我猜它可能是版本 3。html是：
如果我使用非离子组件和普通的 html 项目，例如但如果可能的话，我想要离子组件

标签： angular-directive ionic4 elementref

【解决方案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';
  }
}

用法：<ion-textarea autosize></ion-textarea>

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

问候。

【讨论】：

感谢您的更新和提供的代码。不知道我做错了什么，但我无法使用 ion-textarea 触发该指令。我在指令中添加了一个 console.log 并且它永远不会触发。我什至添加了 ngOnInit 并将 console.log 放在那里，但仍然没有任何输出。
请确保您已将此指令导入页面/组件。
我已将此添加到页面的 xxx.module.ts 文件中 @NgModule({ 导入：[ AutoSizeDirective，但它出现了编译错误：错误：未捕获（承诺）：错误：模块导入的意外值“未定义”
对不起，我的错，我刚刚创建了一个全新的 ionic 项目，添加了您的指令并将其声明在一个通用模块中并将其添加到默认主页。工作得很好。感谢您的解决方案 - 现在我需要弄清楚为什么我的实际项目不会接受它。感谢大家的帮助
好的，现在我很困惑！！！在我的空白新项目中， ion-textarea dom 元素里面只有一个 textarea dom 元素。但是，在我的实际项目中，我的 ion-textarea dom 元素具有 shadow-dom 样式，其中嵌套了 textarea dom 元素。我不知道为什么一个新项目又好又干净，但我的实际项目已将阴影 dom 注入到 ion-textarea 元素中。如果有人能对此有所了解...

【解决方案2】：

这个包为我自动调整了我的 ion-textareas https://github.com/chrum/ngx-autosize 只需按照指南进行操作即可，如果将其导入 app.module.ts 不起作用，请尝试将其导入页面的模块中，如果您愿意，我个人需要这个，但包是救命稻草

【讨论】：