mwlresizable 不起作用

Question

我正在尝试调整图片大小，但是在鼠标抬起时，图片只是移动到新位置而不调整大小。

<img id=image1
       ngDraggable
       mwlResizable
       [enableGhostResize]="true"
       [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
       (resizeEnd)="onResizeEnd($event)"
       src="{{user.picture}}">

组件.ts：

import { ResizeEvent } from "angular-resizable-element";

export class Component{

  onResizeEnd(event: ResizeEvent): void {
    console.log('Element was resized', event);
  }
}

应用模块：

...
import {ResizableModule} from "angular-resizable-element";


@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,

    HttpClientModule,
    AngularDraggableModule,
    ResizableModule
  ],
  providers: [GetJsonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我按照书做了一切

Answer 1

如果它仍然对任何人有用。您需要在 onResizeEnd 函数中应用宽度和高度：

将组件代码更改为：

import { ResizeEvent } from "angular-resizable-element";

export class Component{
   style: {};
   onResizeEnd(event: ResizeEvent): void {
      this.style = {
        width: `${event.rectangle.width}px`,
        height: `${event.rectangle.height}px`
      };
  }
}

将 HTML 代码更改为：

<img id=image1
       ngDraggable
       mwlResizable
       [enableGhostResize]="true"
       [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
       (resizeEnd)="onResizeEnd($event)"
       src="{{user.picture}}" [ngStyle]="style">