使用 angular 2 实现 Rappid答案

【问题标题】：Implement Rappid with angular 2使用 angular 2 实现 Rappid
【发布时间】：2018-01-11 14:28:38
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： angular jointjs rappid

【解决方案1】：

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

Here is the github

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

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

使用所有必需的 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”

在 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"

在 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. 将所有资产移动到 Angular 资产文件夹
5. 确保您的 ts 配置指向 rappid.min.t.ds 文件

【讨论】：

很遗憾，这个没有简单的答案，只能去这个 GitHub 看看代码。进行这项工作的编辑相当广泛。我将添加一些带有一般概述的内容。
感谢@Vinez 的回答，这帮助我完成了集成。

【解决方案2】：

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

您仍然需要在 Angular 中创建一个模块和一个组件，但这会容易得多。

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

【讨论】：

这到底是哪里？什么回购？
该文件夹在快速下载文件中。