在前端开发中，输入框的自适应高度处理往往是一个常见的需求。如果你正在使用 Angular，那么一个方便的解决方案就是使用 npm 包 angular-auto-size-input。
安装
使用 npm 安装 angular-auto-size-input：
npm install angular-auto-size-input
使用
引入模块
在你的 Angular 模块中引入 AngularAutoSizeInputModule：
import { AngularAutoSizeInputModule } from 'angular-auto-size-input';
@NgModule({
imports: [AngularAutoSizeInputModule]
})
export class AppModule {}使用指令
在你的模版中添加 AngularAutoSizeInput 指令：
<textarea [(ngModel)]="inputValue" AngularAutoSizeInput></textarea>
默认情况下，输入框会自动适应高度以适应内容。你可以设置最小高度和最大高度来限制输入框的高度：
<textarea [(ngModel)]="inputValue" AngularAutoSizeInput [minHeight]="50" [maxHeight]="200"></textarea>
示例代码
下面是一个简单的示例，展示如何使用 angular-auto-size-input 包：
app.module.ts
-- -------------------- ---- ------- ------ - ------------- - ---- ---------------------------- ------ - -------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------ - -------------------------- - ---- -------------------------- ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ------------ ---------------------------- ---------- --- ---------- -------------- -- ------ ----- --------- --
app.component.html
<textarea [(ngModel)]="inputValue" AngularAutoSizeInput [minHeight]="50" [maxHeight]="200"></textarea>
app.component.ts
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ---------- - --- -
结论
使用 angular-auto-size-input 包可以轻松实现输入框的自适应高度。通过简单的设置，你可以控制输入框的最小高度和最大高度，以满足不同的需求。如果你正在开发 Angular 应用程序，并需要自适应输入框，请考虑使用 angular-auto-size-input 这个方便的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005761781e8991b448ea8c5