我们如何将 Blockly 导入 Angular 7 应用程序? [英] How do we import Blockly into an Angular 7 application?

问题描述

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

I'm trying to use Blockly in an Angular 7 application but I'm unable to inject the Blockly editor.

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

I have downloaded the files from https://developers.google.com/blockly/guides/get-started/web and copied blockly_compressed.js into my src directory (and renamed it blockly.js). I then try to access Blockly from my component and get errors.

我尝试过的:

导入../blockly.js"

import "../blockly.js"

无法编译，给出错误 TS2304:找不到名称‘Blockly’."

Does not compile, gives "error TS2304: Cannot find name 'Blockly'."

import { Blockly } from '../blockly'

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

Compiles, but gives the following error when the app is opened in a browser:

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

添加具有以下内容的 blockly.d.ts 文件:

Adding a blockly.d.ts file with the following:

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

给出与上述相同的错误.

Gives the same error as above.

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

Any suggestions on what else I could try?

推荐答案

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

I was able to setup with the config mentioned below -

使用 npm 分块安装 -

install blockly with npm -

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

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

included below files in scripts section of angular.json file -

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

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

added below lines in my component html file -

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

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

angular will throw error at this point saying it does not recognise the blockly tags. So need to use NO_ERRORS_SCHEMA in the module or can represent the toolbar XML as a string in the component TS file and use it to inject blockly.

我的组件 TS 文件 -

my component TS file -

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ProgramService } from '../services/program.service';
import { IProgram } from '../models/program';

declare var Blockly: any;

@Component({
  selector: 'app-program-create',
  templateUrl: './program-create.component.html',
  styleUrls: ['./program-create.component.scss']
})
export class ProgramCreateComponent implements OnInit {
  title: string;
  programName: string;
  program: IProgram;
  workspace: any;

  constructor(
    private route: ActivatedRoute,
    private programService: ProgramService,
    private router: Router
  ) {
    this.title = 'Create Visual Program';
    this.route.params.subscribe(params => {
      this.programName = params['programName'];
      this.program = this.programService.getOne(this.programName);
      if (!this.program) {
        this.program = {
          name: this.programName,
          xmlData: null
        };
      }
      console.log(
        'creating/editing the program - ',
        JSON.stringify(this.program)
      );
    });
  }

  ngOnInit() {
    this.workspace = Blockly.inject('blocklyDiv', {
      toolbox: document.getElementById('toolbox'),
      scrollbars: false
    });

    if (this.program.xmlData) {
      this.workspace.clear();
      Blockly.Xml.domToWorkspace(
        Blockly.Xml.textToDom(this.program.xmlData),
        this.workspace
      );
    }
  }

  saveProgram(): void {
    this.program.xmlData = Blockly.Xml.domToText(
      Blockly.Xml.workspaceToDom(this.workspace)
    );
    console.log('saving the program - ', JSON.stringify(this.program));
    this.programService.upsertOne(this.program);
    this.router.navigate(['listProgram']);
  }
}

我在这里写了一篇文章详细解释了这一点 - 集成 Google Blockly带角度

I have written an article explaining this in details here - Integrate Google Blockly with Angular

这篇关于我们如何将 Blockly 导入 Angular 7 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！