用角度2实施Rappid [英] Implement Rappid with angular 2

问题描述

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

I am working on a angular 2 application wherein I have to implement rappid in one of component and had already purchased a licence of rappid with which I have got the licenced rappid.js file.

有关如何将rappid与Angular 2集成的问题.

Facing issues on how to integrate rappid with Angular 2.

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

I have to make use of toolbar, halo, inspector, stencil and other ui components of rappid.

我想如果我使用npm jointjs模块，这些功能将在那里不可用，因为那只会公开核心的JointJS库.

And I guess if I go with npm jointjs module, these features will be not available over there because that will only expose the core JointJS library.

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

Is there any demo application available showing the integration of Rappid with Angular 2.

推荐答案

找不到很好的答案，所以我使用Angular 6和Rappid 2.2进行了完整的演示

Couldn't find a good answer so I made a full demo using Angular 6 and Rappid 2.2

这是github

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

所以要使它工作，我必须

so to get this working I had to

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

1. edit the package.json with all of the required rappid js and its dependencies libraries and the @type for backbone joinjs jquery and lodash

主干网":"^ 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"

"backbone": "^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

include those in the 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"

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

include the .css from rappid.min.css in the angular.json also the style.material.css from the kitchensink.ts app ensure the style.css from the kitchensink.ts app is added to the app.component.css and all references to body or html are applied to :host

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

1. edit the styles.css in your app to have a display block for canvas

以大约1000种方式编辑kitchensink .ts，请参阅github此处列出的很多内容

edit the kitchensink .ts in about a 1000 ways refer to the github to much here to list

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

import the config files and model files and ensure the properly reference the right directory

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

move all assets to the angular assets folder

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

make sure your ts config points to the rappid.min.t.ds file

这篇关于用角度2实施Rappid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！