1

我正在开发一个 angular 2 应用程序，其中我必须在其中一个组件中实现 rappid，并且已经购买了 rappid 许可证，我已经获得了许可的 rappid.js 文件。

面临如何将 rappid 与 Angular 2 集成的问题。

我必须使用 rappid 的工具栏、光环、检查器、模板和其他 ui 组件。

而且我想如果我使用 npm jointjs 模块，这些功能在那里将不可用，因为那只会暴露核心的 JointJS 库。

是否有任何演示应用程序显示 Rappid 与 Angular 2 的集成。

4

2 回答 2

2

找不到好的答案，所以我使用 Angular 6 和 Rappid 2.2 做了一个完整的演示

这里是github

git clone https://github.com/wdunn001/Rappid-Angular-Demo
npm i
ng serve

所以为了让这个工作我不得不

  1. 使用所有必需的 rappid js 及其依赖库以及骨干 joinjs jquery 和 lodash 的 @type 编辑 package.json

    “骨干”：“^1.3.3”，“jointjs”：“^2.1.0”，“jquery”：“^3.3.1”，“lodash”：“^3.10.1”，“dagre”：“0.7 .4”、“graphlib”：“1.0.7”、“canvg”：“git+ https://github.com/clientIO/canvg.git#v2.2.0-rappid”、“ws”：“0.8.1 ”

  2. 包括那些在 angular.json

      "node_modules/jquery/dist/jquery.min.js",
  "node_modules/backbone/node_modules/underscore/underscore.js",
  "node_modules/backbone/backbone.js",
  "node_modules/lodash/index.js",
  "node_modules/jointjs/dist/joint.js",
  "node_modules/dagre/dist/dagre.js",
  "node_modules/graphlib/dist/graphlib.js",
  "rappid/build/rappid.min.js"

  3. 在 angular.json 中包含来自 rappid.min.css 的 .css 以及来自 kitchensink.ts 应用程序的 style.material.css 确保将来自 kitchensink.ts 应用程序的 style.css 添加到 app.component.css 和所有对 body 或 html 的引用应用于 :host

    1. 在您的应用中编辑 styles.css 以获得画布的显示块

    2. 以大约 1000 种方式编辑 kitchensink .ts 参考 github 以在此处列出

    3. 导入配置文件和模型文件并确保正确引用正确的目录

    4. 将所有资产移动到角度资产文件夹

    5. 确保您的 ts 配置指向 rappid.min.t.ds 文件

于 2018-05-06T00:14:52.053 回答
1

在文件夹应用程序中有一个用打字稿编写的 KitchenSink 应用程序版本。文件夹名称为 KitchenSinkTs。

您仍然必须以角度创建模块和组件，但这会容易得多。

package.json 已经具有运行 rappid 的所有节点依赖项。

于 2018-01-31T19:47:02.100 回答