node-威尼斯人最新

在这篇文章中将继续介绍 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
------------------------------------------------------
/architect 0.803.8
/core 8.3.8
/schematics 8.3.8
/angular 8.3.8
/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
｢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 **
｢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

liumiaocn:app liumiao$

liumiaocn:app liumiao$ cat app.component.ts
import { component } from '/core';
import { domsanitizer, safeurl } from '/platform-browser'

({
selector: 'app-root',
templateurl: './app.component.html',
styleurls: ['./app.component.css']
})
export class appcomponent {
noderedurl: string = ""
noderedsafeurl: safeurl;

constructor(private sanitizer : domsanitizer){
this.noderedsafeurl= this.sanitizer.bypasssecuritytrustresource;
}

ngoninit(): void {
}
}
liumiaocn:app liumiao$

结果确认

来源：

nodered 澳门人威尼斯3966官网：

noderedgithub：

nodered 英文社区：

nodered 中文社区：https://www.iotschool.com/topics/node81

nodered 中文社区 qq 群：8604461