Angular2 applciationに取り組んでいます。テキストエリアの自動サイズ調整が必要です。 https://github.com/stevepapa/angular2-autosize からangle2-autosizeを再利用しようとしています
READMEに従いましたが、以下のエラーが表示されます
不明なエラー:モジュールのビルドに失敗しました:エラー:ENOENT:そのようなファイルまたはディレクトリがありません。「C:\ Users\Vipin\SampleApp\node_modules\angular2-autosize\angular2-autosize.js」を開きます。
この問題を克服する方法を提案してください。
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
]
...
})
パッケージを使用せずにこれを行うことができます。簡単です
以下のようなコントローラで
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>
要求された動作は、ここで文書化されているようにangular material
に既に実装されています: Angular Material Input Autosize 。とにかくangular material
を使用している場合、これは特に便利です。
例のようにcdkTextareaAutosize
を使用するだけです:
<textarea cdkTextareaAutosize></textarea>
このためにプラグインが必要な理由は、次のように簡単です:
<textarea (keyup)="autoGrowTextZone($event)"></textarea>
そして
autoGrowTextZone(e) {
e.target.style.height = "0px";
e.target.style.height = (e.target.scrollHeight + 25)+"px";
}
タンベラーの答えを少し修正した答えは@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>
トピックがかなり古いことはわかっていますが、タンバーの回答を変更して最大身長も入力するだけです。
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';
}
}
}
したがって、スタイルの動作を制御できます。
お役に立てば幸いです。
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>
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>