javascript - 以编程方式垂直调整 div 的大小

Question

我正在使用 Angular4+。

我想以编程方式垂直调整 div 的大小。我不知道该怎么做。我不知道从哪里开始。以及如何实现它。我对使用 jquery 不感兴趣。使用 Angular 方式实现此目的的任何想法或解决方案。

.textarea {
   min-height: 150px;
   border:1px solid #ddd;
   padding:15px;
   position:relative;
}

.textarea::before{
   content: '';
   position: absolute;
   bottom: 0;
   margin-left: -15px;
   cursor: s-resize;
   height: 9px;
   width: 100%;
   border-top: 1px solid #f1f1f1;
   overflow: hidden;
   background-color: #eff0f1;
   background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg');
   background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg'),none;
   background-position: 210px -364px;
   background-size: initial;
   background-repeat: no-repeat;
}

<div class="textarea"contenteditable="true">
  this is a text area
</div>

堆栈 Blitz https://stackblitz.com/edit/angular-text-resizable

Answer 1

ngStyle 应该可以解决问题:

<div class="textarea"contenteditable="true" [ngStyle]="{'height.px': height}">
this is a text area
</div>

其中 height 是组件中的一个变量:

@Component(...)
export class Component {
  height = 500;
}