我正在研究 angular2 应用程序。我需要自动调整 textarea 的大小。 我正在尝试重用 https://github.com/stevepapa/angular2-autosize 的 angular2-autosize
按照自述文件进行操作，但出现以下错误
未捕获的错误：模块构建失败：错误：ENOENT：没有这样的文件或目录，打开 'C:\Users\Vipin\SampleApp\node_modules\angular2-autosize\angular2-autosize.js'。
请建议如何解决这个问题。
【问题讨论】：
请求的行为已在angular material 中实现，如下所述：Angular Material Input Autosize。如果您仍然使用angular material，这将特别有用。
只需使用cdkTextareaAutosize，如示例所示：
<textarea cdkTextareaAutosize></textarea>
【讨论】：
更新 (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
]
...
})
【讨论】：
你可以在不使用包的情况下这样做。 很简单
在如下控制器中
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>
【讨论】：
为什么你需要插件，很简单：
<textarea (keyup)="autoGrowTextZone($event)"></textarea>
和
autoGrowTextZone(e) {
e.target.style.height = "0px";
e.target.style.height = (e.target.scrollHeight + 25)+"px";
}
【讨论】：
对 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>
【讨论】：
在 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>
【讨论】：
你可以如下使用：
<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>
【讨论】：
从 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>
【讨论】：
我知道这个话题已经很老了，但我只是更改了 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';
}
}
}
因此，您可以控制样式行为。
希望能帮到你。
【讨论】：