Question

我在angular9上使用了'ResizableModule'，并且我的div现在可以调整大小，但是当我释放div时，它会启动并返回其大小。

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

然后在发布后如何确定其大小。

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

调整角度大小后如何修复元素

1 个答案: