以编程方式垂直调整 div 的大小答案

【问题标题】：programmatically resize div vertically以编程方式垂直调整 div 的大小
【发布时间】：2017-09-25 16:24:00
【问题描述】：

我正在使用 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>

堆栈闪电战https://stackblitz.com/edit/angular-text-resizable

【问题讨论】：

标签： javascript angular css typescript

【解决方案1】：

ngStyle 应该可以解决问题：

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

height 是组件中的变量：

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

【讨论】：

设置高度的任何想法？我很困惑。
我认为您值得阅读文档并稍微了解一下 Angular angular.io/docs
看看 HTML 的内部 textarea 应该会让你找到一个好地方，而不是尝试创建你自己的。 developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

【解决方案2】：

一个指令

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[resizer]'
})
export class NgxResizerDirective implements OnInit {

  height: number;
  oldY = 0;
  grabber = false;

  constructor(private el: ElementRef) { }

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {

    if (!this.grabber) {
      return;
    }

    this.resizer(event.clientY - this.oldY);
    this.oldY = event.clientY;
  }

  @HostListener('document:mouseup', ['$event'])
  onMouseUp(event: MouseEvent) {
    this.grabber = false;
  }

  resizer(offsetY: number) {
    this.height += offsetY;
    this.el.nativeElement.parentNode.style.height = this.height + "px";
  }

  @HostListener('mousedown', ['$event']) onResize(event: MouseEvent, resizer?: Function) {
    this.grabber = true;
    this.oldY = event.clientY;
    event.preventDefault();
  }

  ngOnInit() {
    this.height = parseInt(this.el.nativeElement.parentNode.offsetHeight);
  }

}

HTML

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

工作示例https://stackblitz.com/edit/angular-text-v-resizable

【讨论】：