标签: angular-gridster2

我在使用 gridster 项目中的“ ViewContainerRef ”进行动态组件渲染时遇到问题。

我已经实现了一个组件，它将组件引用、输入和输出作为输入并在其内部创建这个给定的组件。

前任： <app-component-loader [compRef]="{ref: ExComponent}"><app-component-loader>

内部组件加载器 onInit 回调我有

if (this.compRef && this.compRef.ref) {
        this._componentFactory = this._componentFactoryResolver.resolveComponentFactory(this.compRef.ref);

        const instance  = this.viewContainer.createComponent(this._componentFactory, 0).instance;

        console.log(instance);

        if (this.compInputs) {
            Object.getOwnPropertyNames(this.compInputs).forEach(field => {
                instance[field] = this.compInputs[field];
            });
        }

        if (this.compOutputs) {
            Object.getOwnPropertyNames(this.compOutputs).forEach(field => {
                instance[field].subscribe(e => {
                    this.compOutputs[field]();
                });
            });
        }
    }

我将此组件 laoder 用于 gridster 项目组件，例如：

<gridster [options]="gridsterConfig">
            <gridster-item [item]="widget" *ngFor="let widget of board.widgets">
                <app-component-loader [compRef]="{ ref: registry.get(widget.outletComponent) }" [compInputs]="{ widget: widget }" [compOutputs]="{ removeCallback: widgetRemoveCallback.bind(this), changed: widgetChanged.bind(this) }"></app-component-loader> …

我目前正在致力于 angular-gridster2 的集成。目标是获得一个具有固定行高、固定列数的网格，并且应该计算大小。这是我当前的 GridsterConfig：

{
  setGridSize: true,
  margin: 5,
  displayGrid: DisplayGrid.OnDragAndResize,
  gridType: GridType.VerticalFixed,
  keepFixedHeightInMobile: true,
  fixedRowHeight: 50,
  minCols: 6,
  maxCols: 6,
  swap: true,
  pushItems: true,
  resizable: { enabled: true },
  draggable: {enabled: true },
  enableEmptyCellDrop: true,
}

使用此配置，网格高度将按预期计算（完美）。问题是窗口大小调整后宽度保持不变。当我将 setGridSize 属性设置为 false 时，宽度计算按预期工作，但高度始终是边距的 2 倍。

我有以下网格 =>

  dashboard: Array<GridsterItemCustom> = [
    {cols: 4, rows: 10, y: 0, x: 1, type: NavigationMiniMapComponent, inputs: { synchGroupId : this.synchGroupId}, name: 'MINIMAP_NAME', id: 'waypoint'},
    {cols: 4, rows: 10, y: 0, x: 5, type: NavigationVrMapComponent, inputs: { synchGroupId : this.synchGroupId}, name: 'VRMAP_NAME', id: 'vrMap'},
    {cols: 1, rows: 3, y: 7, x: 0, type: NavigationWaypointUiComponent, name: 'WAYPOINT_INFO_NAME', id: 'informationn'},
    {cols: 1, rows: 3, y: 1, x: 0, type: NavigationDroneUiComponent, name: 'DRONE_INFO_NAME', id: 'droneNav'},
    {cols: 1, rows: 3, y: 4, x: 0, …

在我的仪表板上执行一些调整大小/拖动操作后，我想在我的 MongoDB 数据库中保存我更改的小部件的更新大小和位置。幸运的是，gridster 库可以对可拖动和调整大小的事件做出反应。但不幸的是它们是静态的，所以当我想通过使用我的数据库服务保存新值时，它不起作用，因为它不能使用它，因为它不是静态的。

我使用了 Angular 6 和 angular-gridster2 6.0.10。

有谁知道如何使用调整大小/拖动事件来保存我的数据？

这是代码（不可运行，因为我减少了很多）：

export class SheetContentComponent implements OnInit {

  constructor(protected databaseService: DatabaseService,
              private dataService: DataService,
              protected projectService: ProjectService) {
  }

  protected widgetType = WidgetType;
  protected project: Project;
  protected currentDashboardId: string;
  protected user: User;
  protected currentSheetId: string;
  protected widgetPosition: GridsterItem;
  protected currentWidgetId: string;

  protected dashboard: Array<GridsterItem>;

  ngOnInit(): void {

    this.options = {
 gridType: GridType.Fit,
      displayGrid: DisplayGrid.Always,
      compactType: CompactType.None,
      margin: 10,
      outerMargin: true,
      minCols: 50,
      maxCols: 200,
      minRows: 50,
      maxRows: 100,
      pushItems: true, …