以垂直方式調整div的大小

Question

我正在使用Angular4 +。

我想以編程方式垂直調整div的大小。我沒有辦法做到這一點。我不知道從哪裏開始。以及如何實現它。我對使用jquery不感興趣。任何想法或解決方案來實現這個使用角度的方式。

.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>

一個stackblitz https://stackblitz.com/edit/angular-text-resizable

Answer 1

一個指令

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

Answer 2

ngStyle應該做的伎倆：

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

其中height是在組件的變量：

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