时间戳

首页 > 解决方案 > 如何在调整角度后修复元素

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

问题描述

我在 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>

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

标签： angular

解决方案

在调试你的 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 url：https ://stackblitz.com/edit/angular-efhdra

推荐阅读