угловой 4+ по горизонтали

Question

Я новичок в angular 4, и я пытался создать изменяемый размер div (по горизонтали), но я не могу этого достичь.Я хочу щелкнуть мышью, чтобы изменить размер div.Я хочу изменить размер текстовой области по горизонтали. Также в приведенной ниже ссылке события мыши применяются к документу, но я хочу, чтобы события мыши применялись только к классу граббера, а не к документу. Пожалуйста, помогите мне

Спасибо.

Я попробовал этот https://stackblitz.com/edit/angular-text-resizable-zvp3ns?file=app%2Fapp.component.ts

Answer 1

здесь я создал горизонтальный (справа налево) изменяемый размер div, используя угловой 6

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

@Component({
selector: 'my-app',
template: `
<style>
.textarea {
   min-height: 150px;
   border:1px solid #ddd;
   padding:15px;
   position:relative;
   width: 100px;
   float:right;
}
.textarea .grabber{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   margin-right: -15px;
   cursor: ew-resize;
   height: 100%;
   width: 10px;
   border-top: 1px solid #444;
   overflow: hidden;
   background-color: #444;
}
</style>

<div class="textarea"  [style.width.px]='width' contenteditable="true" >

  this is a text area

  <div class="grabber"  ></div> 

</div>`
 })

export class AppComponent  {
  name = 'Angular 6';
  width = 150;
  x = 100;
  oldX = 0;
  grabber = false;

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (!this.grabber) {
        return;
    }
    this.resizer(event.clientX - this.oldX);
    this.oldX = event.clientX;
  }

  @HostListener('document:mouseup', ['$event'])
  onMouseUp(event: MouseEvent) {
    this.grabber = false;
  }
  resizer(offsetX: number) {
    this.width -= offsetX;
  }
  @HostListener('document:mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    this.grabber = true;
    this.oldX = event.clientX;
  }
  }

Answer 2

Использование (mousemove)="func()"

<div class="grabber" (mousemove)="func($event)" ></div> 

В вашем component добавьте функцию, которую вы написали внутри (mousemove)
Регистрирует событие каждый раз, когда элемент перетаскивается поверх этого элемента

Вот события мыши

(щелчок) Проверяет один клик; включая нажатие кнопки мыши вниз, а затем обратно назад

(при наведении курсора) Регистрируется, когда курсор находится над элементом, к которому применяется этот атрибут

(mousedown) Зарегистрирует событие, когда нажата мышь, без необходимости ждать отпускания щелчка

(mouseup) Это событие регистрируется при отпускании щелчка мыши, поэтому нет необходимости выполнять нажатие вниз на самом элементе

(dblclick) Событие двойного щелчка регистрирует событие, когда оно обнаруживает два щелчка мышью за короткий промежуток времени

(перетаскивание) Зарегистрируется при перетаскивании элемента

(dragover) Регистрирует событие каждый раз, когда элемент перетаскивается поверх этого элемента