javascript - 单击角度按钮时如何更改gridster2选项值
问题描述
网格 HTML
<gridster [options]="options">
<gridster-item [item]="item" *ngFor="let item of dashboard">
</gridster-item>
</gridster>
网格-TS
ngOnInit() {
@Input() editing: any;
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
enableEmptyCellClick: false,
enableEmptyCellContextMenu: false,
enableEmptyCellDrop: false,
enableEmptyCellDrag: false,
enableOccupiedCellDrop: false,
emptyCellClickCallback: this.emptyCellClick.bind(this),
emptyCellContextMenuCallback: this.emptyCellClick.bind(this),
emptyCellDropCallback: this.emptyCellClick.bind(this),
emptyCellDragCallback: this.emptyCellClick.bind(this),
emptyCellDragMaxCols: 50,
emptyCellDragMaxRows: 50
};
this.dashboard = [
{ cols: 2, rows: 1, y: 0, x: 0 },
{ cols: 2, rows: 2, y: 0, x: 2 },
{ cols: 1, rows: 1, y: 0, x: 4 },
{ cols: 3, rows: 2, y: 1, x: 4 },
{ cols: 1, rows: 1, y: 4, x: 5 },
{ cols: 1, rows: 1, y: 2, x: 1 },
{ cols: 2, rows: 2, y: 5, x: 5 },
{ cols: 2, rows: 2, y: 3, x: 2 },
{ cols: 2, rows: 1, y: 2, x: 2 },
{ cols: 1, rows: 1, y: 3, x: 4 },
{ cols: 1, rows: 1, y: 0, x: 6 }
];
}
我在这里要做的是启用enableEmptyCellDrag
. 例如,我单击按钮编辑,然后编辑的值为true
,然后的值为enableEmptyCellDrag
真。
我已经尝试过了:
ngOnChanges() {
///this.options['enableEmptyCellDrag'] = true // the enableEmptyCellDrag is undefined
///if (this.editing) {
/// this.options['enableEmptyCellDrag'] = true // the value of enableEmptyCellDrag is change to true, but when I try to drag from the empty cell it doesn't work
///}
}
解决方案
我找到了一个更优雅的解决方案恕我直言。
GridsterConfig 对象有一个 api.optionsChanged 子对象,它是一个函数。如果你运行它,它也会告诉 Gridster 选项发生变化,而不必从本质上重新实例化对象(它可能只是运行这个函数)。看起来更安全,更优雅。
因此,您的更改现在看起来像这样:
ngOnChanges(changes: SimpleChanges) {
if (changes.editing && changes.editing.currentValue) {
this.options.enableEmptyCellDrag = changes.editing.currentValue;
this.options.api.optionsChanged();
}
}
我还建议创建一个如下所示的类,这将防止您被迫检查这些选项是否存在(if 语句只是检查是否定义了 GridsterConfig 接口可选选项......所以如果您定义它们提前没有必要这样做...不确定为什么 Gridster 使存在可选...恕我直言,选项应该始终存在,但可以设置为 null 或默认值)。
export class DashboardOptions implements GridsterConfig{
gridType = GridType.Fit;
compactType = CompactType.None;
margin = 10;
outerMargin = false;
outerMarginTop = null;
outerMarginRight = null;
outerMarginBottom = null;
outerMarginLeft = null;
useTransformPositioning = true;
mobileBreakpoint = 720;
minCols = 1;
maxCols = 100;
minRows = 1;
maxRows = 100;
maxItemCols = 100;
minItemCols = 1;
maxItemRows = 100;
minItemRows = 1;
maxItemArea = 2500;
minItemArea = 1;
defaultItemCols = 1;
defaultItemRows = 1;
fixedColWidth = 105;
fixedRowHeight = 105;
keepFixedHeightInMobile = false;
keepFixedWidthInMobile = false;
scrollSensitivity = 10;
scrollSpeed = 20;
enableEmptyCellClick = false;
enableEmptyCellContextMenu = false;
enableEmptyCellDrop = false;
enableEmptyCellDrag = false;
enableOccupiedCellDrop = false;
emptyCellDragMaxCols = 50;
emptyCellDragMaxRows = 50;
ignoreMarginInRow = false;
public draggable = {
enabled: false,
delayStart: 200,
start: () => {},
stop: () => {}
};
public resizable = {
enabled: true,
delayStart: 200,
start: () => {},
stop: () => {}
};
swap = false;
pushItems = true;
disablePushOnDrag = false;
disablePushOnResize = false;
pushDirections = {north: true, east: true, south: true, west: true};
pushResizeItems = false;
displayGrid = DisplayGrid.Always;
disableWindowResize = false;
disableWarnings = false;
scrollToNewItems = false;
api = {
resize: () => {},
optionsChanged: () => {},
};
itemChangeCallback = (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {};
}
然后,您的更改现在可以如下所示:
ngOnChanges(changes: SimpleChanges) {
this.options.enableEmptyCellDrag = changes.editing.currentValue;
this.options.api.optionsChanged();
}