在 Angular 中调整大小 div 6

Question

我正在处理 Angular 调整元素大小

使用：https://github.com/mattlewis92/angular-resizable-element

我的模块

import { ResizableModule } from 'angular-resizable-element';

@NgModule({
  imports: [ResizableModule],
})

我的组件TS

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

我的组件HTML

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

当我 rezie 元素时，它会恢复到旧尺寸。

我使用他们在文档中建议的配置样式。

我正在使用 styleUrls，它们在哪里给出了样式的语法，显示语法错误。

@Component({
  selector: 'app-widgets',
  templateUrl: './widgets.component.html',
  styleUrls: ['./widgets.component.scss',
  [mwlResizable] {
    box-sizing: border-box;
  }
],
  encapsulation: ViewEncapsulation.None
})

谁能提供正确的语法来定义我的应用程序中的样式。

感谢任何帮助。

Answer 1

As Angular doc says，无法合并styles和styleUrls：

By setting styles or styleUrls metadata

此外，您在 CSS 中写错了属性。它应该在方括号中：

[mwlResizable] {
    box-sizing: border-box; 
}

在 Angular 中调整大小 div 6

Resize div in Angular 6

resizable

angular