如何在 Angular6 项目中使用 gridstack.js

Posted 2023-02-19

【中文标题】如何在 Angular6 项目中使用 gridstack.js

【英文标题】：How to use gridstack.js with Angular6 Project

【发布时间】：2019-08-24 13:13:12

【问题描述】：

我正在做一个Angular6项目，我需要使用gridstack.js，我应该如何在这个版本的项目中使用它

我检查过 gridster 等库，但它们不支持嵌套功能。

我需要与 gridstack 提供的相同的功能以及嵌套支持。需要帮助吗？

【参考方案1】：

更新：截至本周（2020 年 11 月 29 日），Gridstack 现已不再使用 jQuery！

Gridstack 仍然（截至 2020 年 3 月）使用 jQuery，因为它直接操作 DOM 违背了 Angular 的声明性方法。 作为@Adrian points out，虽然并非不可能实现，但在其他人完成dropping jQuery from Gridstack 的工作之前，可能值得避免。

同时还有其他非jQuerypackages that achieve the same goal：

Angular Gridster2 很受欢迎：https://github.com/tiberiuzuld/angular-gridster2 Angular2Gridster 也维护得很好：https://github.com/swiety85/angular2gridster Angular2 仪表板网格未维护：https://github.com/drxwat/angular2-dashboard-grid

可能还有其他人使用我没有遇到过的 Gridster2，但您可以在此处查看一系列方法：https://angularscript.com/category/layout/

【讨论】：

仅供参考，似乎上述问题的工作已完成，并且 v3 已发布... :)

谢谢@Micko - 无论如何请将此答案标记为有用！

确保在 Angular 项目中包含 import 'gridstack/dist/h5/gridstack-dd-native';，如 here 所述

【参考方案2】：

不要，gridstack 是一个 jQuery 插件，在 Angular 项目中包含 jQuery 违反了第一条规则。

【讨论】：

那么我们如何在 Angular 项目中实现 gridstack 功能

***.com/questions/39901473/…

我已经尝试了所有这些建议，但它们不适用于我的 angular6 项目

大家好 - 请参阅我上面的答案和 Micko 的更新 :)