在angular2中自动调整textarea

Question

我正在开发angular2 applciation.我需要自动调整textarea.我试图从https://github.com/stevepapa/angular2-autosize重用angular2-autosize

跟着自述文件,但我得到以下错误

未捕获错误:模块构建失败:错误:ENOENT:没有此类文件或目录,打开'C:\ Users\Vipin\SampleApp \node_modules\angular2-autosize\angular2-autosize.js'.

请建议如何克服这个问题.

Answer 1

更新(15.04.2018)管理打包它,现在它可用

npm install ngx-autosize

https://github.com/chrum/ngx-autosize

老答案:

我今天遇到了同样的问题,并修好了!请检查我的分支:https: //github.com/chrum/angular2-autosize

在PR合并之前尝试:

npm install https://github.com/chrum/angular2-autosize.git --save

然后在你的代码中,因为它略有不同,你只需导入模块而不是指令......

因此 ,而不是:

import {Autosize} from 'angular2-autosize';

@NgModule({
  ...
  declarations: [
    Autosize
  ]
  ...
})

你应该:

import {AutosizeModule} from 'angular2-autosize';

@NgModule({
  ...
  imports: [
    AutosizeModule
  ]
  ...
})

Answer 2

如果不使用包,你可以这样做.这很简单

在控制器如下

autogrow(){
  let  textArea = document.getElementById("textarea")       
  textArea.style.overflow = 'hidden';
  textArea.style.height = '0px';
  textArea.style.height = textArea.scrollHeight + 'px';
}

和html一样,如下所示

<textarea id="textarea" (keyup)="autogrow()" ></textarea>

Answer 3

该解决方案在 IE 和其他浏览器上都对我有用

// Usage example: <textarea autoresize></textarea>

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

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

export class Autosize {
 @HostListener('input',['$event.target'])
  onInput(textArea: HTMLTextAreaElement): void {
    this.adjust();
  }
  constructor(public element: ElementRef){
  }
  ngAfterContentChecked(): void{
    this.adjust();
  }
  adjust(): void{
    this.element.nativeElement.style.overflow = 'hidden';
    this.element.nativeElement.style.height = 'auto';
    this.element.nativeElement.style.height = this.element.nativeElement.scrollHeight + "px";
  }
}

将以下代码添加到 APp.Module.ts

@NgModule({
  declarations: [
    Autosize
  ]
})

在 HTML 上使用标签

 <textarea autosize></textarea>

Answer 4

tanveer答案的稍作修改的答案是使用@ViewChild

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;

public autoGrow() {
 const textArea = this.textArea.nativeElement;
 textArea.style.overflow = 'hidden';
 textArea.style.height = '0px';
 textArea.style.height = textArea.scrollHeight + 'px';
}

在HTML中

<textarea (keyup)="autoGrow()" #textArea></textare>

Answer 5

为什么需要此插件，它很简单：

<textarea (keyup)="autoGrowTextZone($event)"></textarea>

和

autoGrowTextZone(e) {
  e.target.style.height = "0px";
  e.target.style.height = (e.target.scrollHeight + 25)+"px";
}

Answer 6

所请求的行为已经在angular material此处实现，如Angular Material Input Autosize所示。angular material无论如何，这特别有用。

只需cdkTextareaAutosize在示例中使用：

<textarea cdkTextareaAutosize></textarea>

Answer 7

简单地

您可以如下使用：

<textarea [rows]="text.split('\n').length || 2">{{text}}</textarea>

或者

在 ts 中创建一个函数：

  getHeight(content) {
    const v1 = Math.floor(content.length / 50);
    const v2 = content.split('\n').length;
    return Math.max(v1,v2)
  }

HTML：

<textarea [rows]="getHeight(text) || 2">{{text}}</textarea>