0

在过去的两天里，我一直在使用Angular Gridster来帮助创建一个“站点构建器”工具。站点构建器工具的要求之一包括允许工作区中的组件自由移动。我已经设法通过 Angular Gridster 满足了这个要求。但是，我在更新 gridsterItems 以适应“网格单元的动态高度”时遇到了一些困难。

我花了一些时间阅读包，结果发现这是因为 gridsterItems 必须完全填充一个或多个网格单元，所有列必须具有相同的宽度，并且所有行必须具有相同的高度。

想象一个场景，您有两个 gridsterItem，一个内容大小为 200 像素 x 200 像素，一个内容大小为 181 像素 x 181 像素。现在这两个 gridsterItem 不可能彼此相邻，除非每行和每列的高度/宽度为 1 像素（因为 181 是质数，并且与 200 没有公分母）。

上述情况是有道理的，但我是在组件的宽度始终相同而高度会变化的环境中操作的。我不需要 gridsterItems 彼此相邻。它们将在彼此上方/下方。

我正在尝试实现功能以允许自己实现这一点，但我陷入了困境。我的 gridsterItems 似乎只符合单个高度，并且没有“继承”底层组件的真实大小。知道如何解决这个问题吗？

我的代码如下：

import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
import {CompactType, GridsterConfig, GridsterItem, GridsterItemComponent, GridsterPush, GridType} from 'angular-gridster2';

@Component({
  selector: 'app-component',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  options: GridsterConfig;
  dashboard: Array<GridsterItem>;
  itemToPush: GridsterItemComponent;

  ngOnInit() {
    this.options = {
      pushItems: true,
      maxCols: 1,
      margin: 10,
      maxRows: 2,
      displayGrid: 'none',
      scrollVertical: true,
      disableScrollHorizontal: true,
      compactType: 'compactUp&Left',
      mobileBreakpoint: 0,
      resizable: {
        enabled: false
      },
      draggable: {
        enabled: true
      }
    }
    this.dashboard = [{ x: 0, y: 0, rows: 1, cols: 1 },
      { x: 1, y: 0, rows: 1, cols: 1 }];
  }

  changedOptions() {
    if (this.options.api && this.options.api.optionsChanged) {
      this.options.api.optionsChanged();
    }
  }

  removeItem($event, item) {
    $event.preventDefault();
    $event.stopPropagation();
    this.dashboard.splice(this.dashboard.indexOf(item), 1);
  }

  addItem() {
    this.dashboard.push({x: 0, y: 0, cols: 1, rows: 1});
  }

  initItem(item: GridsterItem, itemComponent: GridsterItemComponent) {
    this.itemToPush = itemComponent;
  }

  pushItem() {
    const push = new GridsterPush(this.itemToPush); // init the service
    this.itemToPush.$item.rows += 4; // move/resize your item
    if (push.pushItems(push.fromNorth)) { // push items from a direction
      push.checkPushBack(); // check for items can restore to original position
      push.setPushedItems(); // save the items pushed
      this.itemToPush.setSize();
      this.itemToPush.checkItemChanges(this.itemToPush.$item, this.itemToPush.item);
    } else {
      this.itemToPush.$item.rows -= 4;
      push.restoreItems(); // restore to initial state the pushed items
    }
    push.destroy(); // destroy push instance
    // similar for GridsterPushResize and GridsterSwap
  }
}

我在这里包含了一个 Stackblitz：https ://stackblitz.com/edit/gridster-in-angular-di3ky5

共享预览：https ://gridster-in-angular-di3ky5.stackblitz.io 。

4

0 回答 0