我正在进行角度2应用。我需要自动调整textarea。我正在尝试重用qazxsw poi的角度2-autosize
跟着自述文件,但我得到以下错误
未捕获错误:模块构建失败:错误:ENOENT:没有这样的文件或目录,打开'C:\ Users \ Vipin \ SampleApp \ node_modules \ angular2-autosize \ angular2-autosize.js'。
请建议如何克服这个问题。
更新(15.04.2018)管理打包它,现在它可用
https://github.com/stevepapa/angular2-autosize
npm install ngx-autosize
老答案:
我今天遇到了同样的问题,并修好了!请检查我的叉子:https://github.com/chrum/ngx-autosize
在PR合并之前尝试:
https://github.com/chrum/angular2-autosize
然后在你的代码中,因为它略有不同,你只需导入模块而不是指令......
而不是:
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
]
...
})
和html一样,如下所示
autogrow(){
let textArea = document.getElementById("textarea")
textArea.style.overflow = 'hidden';
textArea.style.height = '0px';
textArea.style.height = textArea.scrollHeight + 'px';
}
为什么你需要这个插件,它就像这样简单:
<textarea id="textarea" (keyup)="autogrow()" ></textarea>
和
<textarea (keyup)="autoGrowTextZone($event)"></textarea>
请求的行为已经在autoGrowTextZone(e) {
e.target.style.height = "0px";
e.target.style.height = (e.target.scrollHeight + 25)+"px";
}
中实现,如下所述:angular material
。如果你正在使用Angular Material Input Autosize,这尤其有用。
只需使用angular material
,例如:
cdkTextareaAutosize
tanveer的答案略有修改的答案是使用@ViewChild
<textarea cdkTextareaAutosize></textarea>
在HTML中它会是
@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';
}
我知道这个话题已经很老了,但我只是改变了tanveer的答案来输入最大高度。
<textarea (keyup)="autoGrow()" #textArea></textare>
因此,您可以控制样式行为。 我希望它可以提供帮助。
从angular-cli创建指令并添加以下代码
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';
}
}
}
并使用如下指令
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';
}
}
}
在IE上以及在其他浏览器中为我工作的解决方案
<textarea autofocus [maximumHeight]="200" [minHeight]="43" appAutoGrow></textarea>
将以下代码添加到APp.Module.ts
// 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";
}
}
使用HTML上的标记
@NgModule({
declarations: [
Autosize
]
})