如何在调整角度后修复元素

Question

我在 angular9 上使用“ResizableModule”，我的 div 现在可以调整大小，但是当我释放 div 时它启动并返回到它的大小。

我用过：https://www.npmjs.com/package/angular-resize-element那个包。

然后如何在发布后修复它的大小。

我的组件.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.scss：

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 解决方案后，我注意到在 resizeEnd 函数末尾创建的样式 css 不适用于可调整大小的 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>

这是我的解决方案的 stackblitz 网址：https://stackblitz.com/edit/angular-efhdra