Question

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

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

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

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

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

Answer 1

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

你仍然需要以角度创建一个模块和一个组件，但它会更容易。

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

Answer 2

无法找到一个好的答案所以我使用Angular 6和Rappid 2.2进行了完整的演示

Here is the github

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

所以为了让这个工作，我必须

使用所有必需的rappid js及其依赖库编辑package.json，并使用@type for backbone joinjs jquery和lodash

＆＃34; backbone＆＃34;：＆＃34; ^ 1.3.3＆＃34;，＆＃34; jointjs＆＃34;：＆＃34; ^ 2.1.0＆＃34;，＆＃34; jquery＆＃34;：＆＃34; ^ 3.3.1＆＃34;，＆＃34; lodash＆＃34;：＆＃34; ^ 3.10.1＆＃34;，＆＃34; dagre＆＃34;：＆＃34; 0.7.4＆＃34;，＆＃34; graphlib＆＃34;：＆＃34; 1.0.7＆＃34;，＆＃34; canvg＆＃34;：＆＃34; git + https://github.com/clientIO/canvg.git#v2.2.0-rappid＆＃34;，＆＃34; ws＆＃34;：＆＃34; 0.8.1＆＃34;

包括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以及来自kitchennsink.ts应用程序的style.material.css，确保来自kitchennsink.ts应用程序的style.css已添加到应用程序中.component.css以及对body或html的所有引用都应用于：host
1. 编辑应用中的styles.css以获得画布的显示块
2. 以大约1000种方式编辑kitchennsink .ts参考github到这里列出很多
3. 导入配置文件和模型文件，并确保正确引用正确的目录
4. 将所有资源移至角资产文件夹
5. 确保您的ts配置指向rappid.min.t.ds文件

用角度2

2 个答案: