как исправить элементы после изменения размера на angular

Question

Я использую ResizableModule на angular9, и мой div теперь изменяет размеры, но когда я освобождаю div, он инициируется и возвращается к его размеру.

Я использовал: https://www.npmjs.com/package/angular-resize-element, что Пакет.

тогда как исправить его размер после выпуска.

my component.ts:

import {MatTableDataSource} from '@angular/material/table';
export class SampleComponent implements OnInit
{
        public style: object = {};

    onResizeEnd(event: ResizeEvent): void {
        console.log('Element was resized', event);
        this.style = {
            position: 'fixed',
            left: `${event.rectangle.left}px`,
            top: `${event.rectangle.top}px`,
            width: `${event.rectangle.width}px`,
            height: `${event.rectangle.height}px`
          };
    }

Html:

<div
      mwlResizable
      [enableGhostResize]="true"
      [resizeEdges]="{ bottom: true, right: true, top: true, left: true }"
      (resizeEnd)="onResizeEnd($event)"
         style="width: 95%;" 
      > </div>

component.s css:

mwlResizable {
    box-sizing: border-box;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
} 

есть простой пример для stackBlitz: https://stackblitz.com/edit/angular-3rowwg

Answer 1

После отладки вашего решения stackblitz я заметил, что созданный стиль css в конце функции resizeEnd не применяется к div с изменяемым размером.

Здесь я добавил стиль, используя ngstyle, поэтому всякий раз, когда переменная this.style изменяется новый ngstyle настроит css в соответствии с переменной

Вот ваше решение

app.component. js

import { Component } from '@angular/core';
import { ResizeEvent } from 'angular-resizable-element';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public style: object = {};
       onResizeEnd(event: ResizeEvent): void {
        console.log('Element was resized', event);
        this.leftPosition = event.rectangle.left;
        this.topPosition = event.rectangle.top;
        this.divWidth = event.rectangle.width;
        this.divHeight = event.rectangle.height;
        this.style = {
            position: 'fixed',
            left: `${this.leftPosition}px`,
            top: `${this.topPosition}px`,
            width: `${this.divWidth}px`,
            height: `${this.divHeight}px`
          };
          console.log(this.style)
    }
}

app.component. html

<div
      mwlResizable
      [enableGhostResize]="true"
      [resizeEdges]="{ bottom: true, right: true, top: true, left: true }"
      (resizeEnd)="onResizeEnd($event)"
      style="border:1px solid red;" [ngStyle]="style"> i'm resizales</div>

Вот URL-адрес стекаблица для моего решения: https://stackblitz.com/edit/angular-efhdra