问题标签 [angular-gridster2]

我有如下的 gridster 项目并使用https://github.com/tiberiuzuld/angular-gridster2

.ts

调整大小功能就像

但什么也没发生。控制台没有错误。请指教

我正在使用 angular-gridster2 库向页面添加项目。我想在正在添加的那些项目中加载内容。元素通过一个服务放置ngFor并通过服务添加/删除。我已经查看ComponentFactoryResolver并componentRef用于加载动态内容，但所有教程都显示在单个静态目标中使用类似<div #container></div>. 但是，我的是：

我有一个用于“导航”选择的组件，它向页面添加了一个元素，我还想传递一个类型，该类型指示动态加载到添加的元素中的内容。目前我正在传递一个大小(click)="add(large)"，它将“大”大小数组推送到服务器以将元素放置在页面上：

我的 app.component.html 看起来像这样：

再次，app-navigation并app-grid通过连接grid-component.service以允许add导航传递添加到的元素grid。我想在 click 中指定的每个网格项目上放置一个动态组件，(click)="add('large','comp1')"然后将其传递给服务，该服务反过来处理请求并将内容加载到新创建的网格项目中。

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

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

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

在组件加载器 onInit 回调中我有

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

它工作正常并在开发时加载 gridster 项目及其出口组件。

但是，今天我尝试使用服务器构建我的应用程序ng build --prod并部署到服务器，我发现我的组件加载器没有创建组件。

我是否缺少用于生产构建的动态组件创建的特殊内容。我对此进行了搜索，但一无所获。

在实现我的组件加载器组件之前，我正在使用ng-dynamic-component包创建此组件，并且它在开发时工作正常，但出现异常，说组件实例在生产时为 NULL 。

我认为创建渲染组件的方式不是问题，但需要帮助。

此外，我的依赖项是：

谢谢你们。

角度版本 - 4.0.0

角gridster2 - 2.10.0

当将项目随机拖动到其他项目上时，它会重叠（如下图所示）

圈出的数字是cols X rows

零件：

HTML：

上述行为是随机发生的。没有重现此错误的特定步骤。你能告诉我哪里出错了吗？

我目前正在研究 angular-gridster2 的集成。目标是获得具有固定行高、固定列数和大小的网格。这是我当前的 GridsterConfig：

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

下面是简单的 github 演示的链接。

我正在尝试创建一个 gridster 应用程序。Gridster 将适合自己的屏幕。Gridster 项目将包含一些可滚动的部分（如不可滚动的标题 + 可滚动的内容）。
理想情况下，我希望可滚动部分包含网格项目的剩余区域。我可以通过设置 css 溢出属性来设法使整个项目可滚动，但不是部分。

格子配置：

应用组件：

我的问题是如何使div尺寸仅到 gridster 项目的末尾？

演示在这里

非常感谢您的帮助

在我的应用程序中，我有一个仪表板，用户可以在其中添加和删除小部件。为此，我正在使用 angular-gridster2。这很好用，但是当我首先从仪表板添加或删除小部件时，不再显示小部件，然后只有在刷新后才会发生正确的更改。ngFor 指令正在迭代的我的小部件列表是从可观察的构建的。这些值会正确更改。

这是我的html：

在我ngOnInit的订阅中，我订阅了可观察的：

});

这是返回list of widgets应该显示的方法：

}

我真的找不到这种行为的原因，所以如果有人这样做，我很感激。提前致谢。

我是角度 gridster2 的新手。我想知道“单击按钮时如何动态和静态地加载网格”的重要代码。例如，我的 UI 页面中有一个名为“选择布局”的按钮，当我选择“4×1”选项时，网格应根据所选选项动态加载。请帮我解决一下这个。我们如何使用 angular 2 来做到这一点？

我在 gridster 项目中的 SVG 图表中添加了一个自定义工具提示（所有示例都在 stackblitz 上提供）。工具提示 (div) 坐标是使用（简单示例- 工具提示 div 偏移 20px）获取nativeElement和设置的。但是，当我在 gridster 项目中投影图表小部件时，工具提示总是添加到错误的位置（请参阅完整示例- 将鼠标悬停在圆圈上）。似乎对于每个小部件，div 的坐标都会增加该小部件距离窗口边缘（左侧和顶部）的距离。Renderer2

从视觉上看，这是工具提示应该离圆圈多远：

但实际上（元素离屏幕边缘越远，工具提示放置得越远）：

我试图看看这是否是<ng-content>ie 中的内容投影的问题GridsterItem，但是当我制作一个自定义组件来模仿它时，我似乎并不喜欢这样（参见这个例子）。为什么 gridster 项目中的坐标很时髦？是renderer相对于小部件设置坐标，还是相对于document?

例如在这个演示中https://tiberiuzuld.github.io/angular-gridster2/push

当我将项目 2 移到顶部时，将 1 和 3 向下移动并添加一个空行 (4)：

我找不到摆脱这个空行的方法：即我想在将 1 移到顶部后得到这个结果：

是否有设置或其他方式来获得这种行为？