Node-RED使用指南：24:嵌入到Angular应用中

在这篇文章中将继续介绍Node-RED的集成方式，在上篇文章中介绍了将Node-RED嵌入Node.js的方法，这篇继续介绍如何通过iframe将Node-RED嵌入到Angular中。

环境准备

• Node-RED 以容器方式启动Node-RED服务，启动命令如下所示：

启动命令：docker run -it -p 1880:1880 -v $PWD/data:/data -e TZ=Asia/Shanghai --name nodered -d nodered/node-red:1.0.4

• Angular Angualr版本和node等版本信息如下

liumiaocn:nodered liumiao$ node -v
v10.15.3
liumiaocn:nodered liumiao$ npm -v
6.4.1
liumiaocn:nodered liumiao$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 8.3.8
Node: 10.15.3
OS: darwin x64
Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.803.8
@angular-devkit/core         8.3.8
@angular-devkit/schematics   8.3.8
@schematics/angular          8.3.8
@schematics/update           0.803.8
rxjs                         6.4.0
    
liumiaocn:nodered liumiao$

示例应用准备

使用Angular CLI按照缺省方式创建Angular示例应用即可，按照如下命令执行即可

步骤1: 生成骨架应用并下载依赖

执行命令：ng new nodered

执行日志如下所示：

liumiaocn:nodered liumiao$ ng new nodered
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE nodered/README.md (1024 bytes)
CREATE nodered/.editorconfig (246 bytes)
CREATE nodered/.gitignore (631 bytes)
CREATE nodered/angular.json (3601 bytes)
CREATE nodered/package.json (1281 bytes)
CREATE nodered/tsconfig.json (543 bytes)
CREATE nodered/tslint.json (1953 bytes)
CREATE nodered/browserslist (429 bytes)
CREATE nodered/karma.conf.js (1019 bytes)
CREATE nodered/tsconfig.app.json (270 bytes)
CREATE nodered/tsconfig.spec.json (270 bytes)
CREATE nodered/src/favicon.ico (948 bytes)
CREATE nodered/src/index.html (293 bytes)
CREATE nodered/src/main.ts (372 bytes)
CREATE nodered/src/polyfills.ts (2838 bytes)
CREATE nodered/src/styles.css (80 bytes)
CREATE nodered/src/test.ts (642 bytes)
CREATE nodered/src/assets/.gitkeep (0 bytes)
CREATE nodered/src/environments/environment.prod.ts (51 bytes)
CREATE nodered/src/environments/environment.ts (662 bytes)
CREATE nodered/src/app/app.module.ts (314 bytes)
CREATE nodered/src/app/app.component.css (0 bytes)
CREATE nodered/src/app/app.component.html (25498 bytes)
CREATE nodered/src/app/app.component.spec.ts (984 bytes)
CREATE nodered/src/app/app.component.ts (211 bytes)
CREATE nodered/e2e/protractor.conf.js (810 bytes)
CREATE nodered/e2e/tsconfig.json (214 bytes)
CREATE nodered/e2e/src/app.e2e-spec.ts (640 bytes)
CREATE nodered/e2e/src/app.po.ts (262 bytes)
...
added 1453 packages from 1067 contributors in 60.716s
    Successfully initialized git.
liumiaocn:nodered liumiao$

步骤2: 结果确认

执行如下命令启动服务，并在缺省的4200端口确认应用是否正常运行

执行命令：npm start

liumiaocn:nodered liumiao$ cd nodered/
liumiaocn:nodered liumiao$ npm start

> nodered@0.0.0 start /Users/liumiao/test/nodered/nodered/nodered
> ng serve

10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 48.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 269 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.72 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.81 MB [initial] [rendered]
Date: 2020-03-10T22:46:44.323Z - Hash: 72fabb3175bd925b73c7 - Time: 6112ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

结果确认

通过iframe嵌入Node-RED

直接修改html页面即可在Angular的示例页面中添加iframe了，这里为了简单，删除其余内容，仅剩iframe相关内容。

liumiaocn:nodered liumiao$ ls
README.md		e2e			package-lock.json	tsconfig.app.json	tslint.json
angular.json		karma.conf.js		package.json		tsconfig.json
browserslist		node_modules		src			tsconfig.spec.json
liumiaocn:nodered liumiao$ cd src/app/
liumiaocn:app liumiao$ ls
app.component.css	app.component.html	app.component.spec.ts	app.component.ts	app.module.ts
liumiaocn:app liumiao$ vi app.component.html 
liumiaocn:app liumiao$ cat app.component.html
		
			
		
liumiaocn:app liumiao$

此处直接使用DomSanitizer和属性绑定将html和ts文件修改为如下：

liumiaocn:app liumiao$ cat app.component.html <iframe [src]="noderedSafeUrl" style="width:100%;" height="900px">