在Angular中设置文本区域在屏幕上的自动高度可以通过以下步骤实现:
ngModel
指令绑定文本区域的内容到一个组件属性上,例如:<textarea [(ngModel)]="textAreaContent"></textarea>
textarea {
height: auto;
overflow: hidden;
resize: none;
}
ViewChild
装饰器获取文本区域的引用,并在适当的时机调整其高度:import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
@ViewChild('textArea') textArea: ElementRef;
ngAfterViewInit() {
this.adjustTextAreaHeight();
}
adjustTextAreaHeight() {
const textAreaElement = this.textArea.nativeElement;
textAreaElement.style.height = 'auto';
textAreaElement.style.height = textAreaElement.scrollHeight + 'px';
}
}
<textarea #textArea (input)="adjustTextAreaHeight()"></textarea>
通过以上步骤,文本区域将会在屏幕上自动调整高度,以适应其内容的大小变化。
领取专属 10元无门槛券
手把手带您无忧上云