我们如何将 Blockly 导入到 Angular 7 应用程序中？

Question

我尝试在 Angular 7 应用程序中使用 Blockly，但无法注入 Blockly 编辑器。

我已经从https://developers.google.com/blockly/guides/get-started/web下载了文件，并将 blockly_compressed.js 复制到我的 src 目录中（并将其重命名为 blockly.js）。然后我尝试从我的组件访问 Blockly 并收到错误。

我尝试过的：

导入“../blockly.js”

无法编译，给出“错误 TS2304：找不到名称“Blockly”。”

import { Blockly } from '../blockly'

编译，但在浏览器中打开应用程序时出现以下错误：

ERROR TypeError: _blockly__WEBPACK_IMPORTED_MODULE_4__.Blockly.inject is not a function

添加包含以下内容的 blockly.d.ts 文件：

export namespace Blockly {
    export function inject(div: string, config: any): void;
}

给出与上面相同的错误。

关于我还可以尝试什么的任何建议？

Answer 1

我能够使用下面提到的配置进行设置 -

\n\n

使用 npm 安装 blockly -

\n\n

npm install git://github.com/google/blockly.git#1.20190419.0\n

\n\n

在 angular.json 文件的脚本部分包含以下文件 -

\n\n

    "scripts": [\n      "node_modules/blockly/blockly_compressed.js",\n      "node_modules/blockly/blocks_compressed.js",\n      "node_modules/blockly/msg/js/en.js",\n      "src/assets/blockly/custom_blocks.js"\n    ]\n

\n\n

在我的组件 html 文件中添加了以下几行 -

\n\n

  <div id="blocklyDiv" style="width: 100%; height: 100%"></div>\n  <xml id="toolbox" style="display: none">\n    <category name="Control" colour="120">\n      <block type="controls_if"></block>\n      <block type="controls_repeat_ext" disabled="true"></block>\n    </category>\n    <category name="Text" colour="230">\n      <block type="text"></block>\n      <block type="text_print"></block>\n    </category>\n    <category name="Custom" colour="360">\n      <block type="begin"></block>\n      <block type="move"></block>\n      <block type="end"></block>\n    </category>\n  </xml>\n

\n\n

此时 Angular 会抛出错误，表示它无法识别块状标签。因此需要在模块中使用NO_ERRORS_SCHEMA或者可以将工具栏XML表示为组件TS文件中的字符串并使用它来进行块注入。

\n\n

我的组件 TS 文件 -

\n\n

import { Component, OnInit } from \'@angular/core\';\nimport { ActivatedRoute, Router } from \'@angular/router\';\nimport { ProgramService } from \'../services/program.service\';\nimport { IProgram } from \'../models/program\';\n\ndeclare var Blockly: any;\n\n@Component({\n  selector: \'app-program-create\',\n  templateUrl: \'./program-create.component.html\',\n  styleUrls: [\'./program-create.component.scss\']\n})\nexport class ProgramCreateComponent implements OnInit {\n  title: string;\n  programName: string;\n  program: IProgram;\n  workspace: any;\n\n  constructor(\n    private route: ActivatedRoute,\n    private programService: ProgramService,\n    private router: Router\n  ) {\n    this.title = \'Create Visual Program\';\n    this.route.params.subscribe(params => {\n      this.programName = params[\'programName\'];\n      this.program = this.programService.getOne(this.programName);\n      if (!this.program) {\n        this.program = {\n          name: this.programName,\n          xmlData: null\n        };\n      }\n      console.log(\n        \'creating/editing the program - \',\n        JSON.stringify(this.program)\n      );\n    });\n  }\n\n  ngOnInit() {\n    this.workspace = Blockly.inject(\'blocklyDiv\', {\n      toolbox: document.getElementById(\'toolbox\'),\n      scrollbars: false\n    });\n\n    if (this.program.xmlData) {\n      this.workspace.clear();\n      Blockly.Xml.domToWorkspace(\n        Blockly.Xml.textToDom(this.program.xmlData),\n        this.workspace\n      );\n    }\n  }\n\n  saveProgram(): void {\n    this.program.xmlData = Blockly.Xml.domToText(\n      Blockly.Xml.workspaceToDom(this.workspace)\n    );\n    console.log(\'saving the program - \', JSON.stringify(this.program));\n    this.programService.upsertOne(this.program);\n    this.router.navigate([\'listProgram\']);\n  }\n}\n

\n\n

我在这里写了一篇文章详细解释了这一点 -\xc2\xa0 Integrate Google Blockly with Angular

\n