web-dev-qa-db-ja.com

angular2のテキストエリアを自動サイズ調整

Angular2 applciationに取り組んでいます。テキストエリアの自動サイズ調整が必要です。 https://github.com/stevepapa/angular2-autosize からangle2-autosizeを再利用しようとしています

READMEに従いましたが、以下のエラーが表示されます

不明なエラー：モジュールのビルドに失敗しました：エラー：ENOENT：そのようなファイルまたはディレクトリがありません。「C：\ Users\Vipin\SampleApp\node_modules\angular2-autosize\angular2-autosize.js」を開きます。

この問題を克服する方法を提案してください。

angulartextareaautosize
10
vipin

Update（2018年4月15日）パッケージ化を管理し、現在入手可能

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

そして、あなたのコードでは、それがわずかに異なるため、ディレクティブではなくモジュールをインポートするだけです...

so代わりに：

import {Autosize} from 'angular2-autosize';

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

必要です：

import {AutosizeModule} from 'angular2-autosize';

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

パッケージを使用せずにこれを行うことができます。簡単です

以下のようなコントローラで

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>
10
tanveer ahmad dar

要求された動作は、ここで文書化されているようにangular materialに既に実装されています： Angular Material Input Autosize 。とにかくangular materialを使用している場合、これは特に便利です。

例のようにcdkTextareaAutosizeを使用するだけです：

<textarea cdkTextareaAutosize></textarea>
5
Jens

このためにプラグインが必要な理由は、次のように簡単です：

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

そして

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

タンベラーの答えを少し修正した答えは@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>
3
dilantha111

トピックがかなり古いことはわかっていますが、タンバーの回答を変更して最大身長も入力するだけです。

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

}

したがって、スタイルの動作を制御できます。
お役に立てば幸いです。

1
Yasin Farmani

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>
1
Saad Shaikh

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>
0
San Jaisy