在angular2中自动调整文本区域

Question

我正在研究 angular2 应用程序。我有一个自动调整文本区域的要求。我正在尝试重用 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

对 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 4

我知道这个话题很老，但我只是更改了 tanveer 的答案以输入最大高度。

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

@Directive({
  selector: '[appAutoResize]',

})
export class AutoResizeDirective implements OnInit {
  constructor(public element: ElementRef) {
  }
  @Input() maximumHeight: number; // based on pixel
  @HostListener('input', ['$event.target'])
  ngOnInit(): void {
    this.adjust();
  }

  adjust(): void {
    const ta = this.element.nativeElement;
    const maxHeghit = this.maximumHeight;
    ta.style.overflow = 'hidden';
    ta.style.height = 'auto';
    if (ta.scrollHeight <= maxHeghit) { // while current height is less than maximumHeight
      ta.style.height = ta.scrollHeight + 'px';
    } else { // greater than maximumHeight
      ta.style.height = maxHeghit + 'px';
      ta.style.overflow = 'auto';
    }
  }

}

因此，您将可以控制样式行为。
希望对你有帮助。

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-cli 创建指令并添加以下代码

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

@Directive({
selector: '[appAutoGrow]'
})
export class AutoGrowDirective {

constructor(public element: ElementRef) {
}
@Input() maximumHeight: number; // based on pixel
@Input() minHeight: number; // based on pixel
@HostListener('input', ['$event.target'])
@HostListener('cut', ['$event.target'])
@HostListener('paste', ['$event.target'])
@HostListener('change', ['$event.target'])

ngOnInit(): void {
    this.adjustCustom();
}

adjustCustom(): void {
    const element = this.element.nativeElement;
    element.style.height = this.minHeight + 'px';
    element.style.height = (element.scrollHeight) + 'px';
    if (element.scrollHeight <= this.maximumHeight) {

        element.style.overflowY = 'hidden'
        delete element.style.maxHeight
    } else {

        element.style.overflowY = 'scroll'
        element.style.maxHeight = this.maximumHeight + 'px';
    }

}
}

并按如下方式使用指令

<textarea autofocus [maximumHeight]="200" [minHeight]="43" appAutoGrow></textarea>

Answer 7

所请求的行为已在 angular material 中实现，如此处记录：Angular Material Input Autosize。如果您仍然使用 angular material，这将特别有用。

只需使用 cdkTextareaAutosize，如示例所示：

<textarea cdkTextareaAutosize></textarea>

Answer 8

我在 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 9

简单

您可以如下使用：

<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>

Answer 10

这里是 autosize 在指令中的实现，您可以在项目中的任何文本区域重复使用它。

import { Directive, Input, HostBinding } from '@angular/core';

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

export class TextareaAutosizeDirective {

    private _ngModel: any;

    public get ngModel(): any {
        return this._ngModel;
    }

    @Input()
    public set ngModel(value: any) {
        if (this._ngModel !== value) {
            this._ngModel = value;
            this.resize();
        }
    }

    @HostBinding('rows')
    public rows: number;

    @Input()
    public minRows: number = 1;

    constructor() {}

    private resize() {
        this.rows = !this._ngModel ? this.minRows : this.ngModel.split('\n').length;
    }

}

您可以通过以下方式使用它：

<textarea autosize minRows="2" [(ngModel)]="property"></textarea>

通过添加 autosize，文本区域会自动调整大小。您还可以指定 textarea 具有的最小行数。

在angular2中自动调整文本区域

autosize textarea in angular2

angular

textarea

autosize

简单

或