0

我想在 Angular 7 中导入 Blockly，我在 angular.json 中导入了一些 Blockly 文件：

"scripts": [
              "node_modules/blockly/blockly_uncompressed.js",
              "node_modules/blockly/blocks_compressed.js",
              "node_modules/blockly/javascript_compressed.js",
              "node_modules/blockly/msg/js/en.js",
              "node_modules/blockly/blocks/lists.js",
              "node_modules/blockly/blocks/logic.js",
              "node_modules/blockly/core/css.js"
            ]

之后，我将我的块状 div 放在我的 app.component.html 中：

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

为了完成，我已经通过以下链接编写了我的块：https ://groups.google.com/forum/#!topic/blockly/bQHtXnt_6MY

import { Component, OnInit } from '@angular/core';

declare var Blockly: any;

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'AnglularBlockly';

workspacePlayground : any;

public toolbox:string =
<xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;"> <category name="Logic" colour="#5C81A6"> <block type="controls_if"></block> <block type="logic_compare"> <field name="OP">EQ</field> </block> <block type="logic_operation"> <field name="OP">AND</field> </block> <block type="logic_negate"></block> <block type="logic_boolean"> <field name="BOOL">TRUE</field> </block> <block type="logic_null"></block> <block type="logic_ternary"></block> </category> <category name="Loops" colour="#5CA65C"> <block type="controls_repeat_ext"> <value name="TIMES"> <shadow type="math_number"> <field name="NUM">10</field> </shadow> </value> </block> <block type="controls_whileUntil"> <field name="MODE">WHILE</field> </block> <block type="controls_for"> <field name="VAR" id="TWD31WlVifV63ZP6vMC~" variabletype="">i</field> <value name="FROM"> <shadow type="math_number"> <field name="NUM">1</field> </shadow> </value> <value name="TO"> <shadow type="math_number"> <field name="NUM">10</field> </shadow> </value> <value name="BY"> <shadow type="math_number"> <field name="NUM">1</field> </shadow> </value> </block> <block type="controls_forEach"> <field name="VAR" id="1E#/ieTE6ryfCX*05^S" variabletype="">j</field> </block> <block type="controls_flow_statements"> <field name="FLOW">BREAK</field> </block> </category> <category name="Math" colour="#5C68A6"> <block type="math_round"> <field name="OP">ROUND</field> <value name="NUM"> <shadow type="math_number"> <field name="NUM">3.1</field> </shadow> </value> </block> <block type="math_number"> <field name="NUM">0</field> </block> <block type="math_single"> <field name="OP">ROOT</field> <value name="NUM"> <shadow type="math_number"> <field name="NUM">9</field> </shadow> </value> </block> <block type="math_trig"> <field name="OP">SIN</field> <value name="NUM"> <shadow type="math_number"> <field name="NUM">45</field> </shadow> </value> </block> <block type="math_constant"> <field name="CONSTANT">PI</field> </block> <block type="math_number_property"> <mutation divisor_input="false"></mutation> <field name="PROPERTY">EVEN</field> <value name="NUMBER_TO_CHECK"> <shadow type="math_number"> <field name="NUM">0</field> </shadow> </value> </block> <block type="math_arithmetic"> <field name="OP">ADD</field> <value name="A"> <shadow type="math_number"> <field name="NUM">1</field> </shadow> </value> <value name="B"> <shadow type="math_number"> <field name="NUM">1</field> </shadow> </value> </block> <block type="math_on_list"> <mutation op="SUM"></mutation> <field name="OP">SUM</field> </block> <block type="math_modulo"> <value name="DIVIDEND"> <shadow type="math_number"> <field name="NUM">64</field> </shadow> </value> <value name="DIVISOR"> <shadow type="math_number"> <field name="NUM">10</field> </shadow> </value> </block> <block type="math_constrain"> <value name="VALUE"> <shadow type="math_number"> <field name="NUM">50</field> </shadow> </value> <value name="LOW"> <shadow type="math_number"> <field name="NUM">1</field> </shadow> </value> <value name="HIGH"> <shadow type="math_number"> <field name="NUM">100</field> </shadow> </value> </block> <block type="math_random_int"> <value name="FROM"> <shadow type="math_number"> <field name="NUM">1</field> </shadow> </value> <value name="TO"> <shadow type="math_number"> <field name="NUM">100</field> </shadow> </value> </block> <block type="math_random_float"></block> </category> <category name="Text" colour="#5CA68D"> <block type="text_charAt"> <mutation at="true"></mutation> <field name="WHERE">FROM_START</field> <value name="VALUE"> <block type="variables_get"> <field name="VAR" id="uJtQDB4G4ZaKe.4Mkln3" variabletype="">text</field> </block> </value> </block> <block type="text"> <field name="TEXT"></field> </block> <block type="text_append"> <field name="VAR" id="bkgT?Q+Pzb{Pwz90n=Jg" variabletype="">item</field> <value name="TEXT"> <shadow type="text"> <field name="TEXT"></field> </shadow> </value> </block> <block type="text_length"> <value name="VALUE"> <shadow type="text"> <field name="TEXT">abc</field> </shadow> </value> </block> <block type="text_isEmpty"> <value name="VALUE"> <shadow type="text"> <field name="TEXT"></field> </shadow> </value> </block> <block type="text_indexOf"> <field name="END">FIRST</field> <value name="VALUE"> <block type="variables_get"> <field name="VAR" id="uJtQDB4G4ZaKe.4Mkln3" variabletype="">text</field> </block> </value> <value name="FIND"> <shadow type="text"> <field name="TEXT">abc</field> </shadow> </value> </block> <block type="text_join"> <mutation items="2"></mutation> </block> <block type="text_getSubstring"> <mutation at1="true" at2="true"></mutation> <field name="WHERE1">FROM_START</field> <field name="WHERE2">FROM_START</field> <value name="STRING"> <block type="variables_get"> <field name="VAR" id="uJtQDB4G4ZaKe.4Mkln3" variabletype="">text</field> </block> </value> </block> <block type="text_changeCase"> <field name="CASE">UPPERCASE</field> <value name="TEXT"> <shadow type="text"> <field name="TEXT">abc</field> </shadow> </value> </block> <block type="text_trim"> <field name="MODE">BOTH</field> <value name="TEXT"> <shadow type="text"> <field name="TEXT">abc</field> </shadow> </value> </block> <block type="text_print"> <value name="TEXT"> <shadow type="text"> <field name="TEXT">abc</field> </shadow> </value> </block> <block type="text_prompt_ext"> <mutation type="TEXT"></mutation> <field name="TYPE">TEXT</field> <value name="TEXT"> <shadow type="text"> <field name="TEXT">abc</field> </shadow> </value> </block> </category> <category name="Lists" colour="#745CA6"> <block type="lists_indexOf"> <field name="END">FIRST</field> <value name="VALUE"> <block type="variables_get"> <field name="VAR" id="@|eFaNfze;*D8(]KS}X)" variabletype="">list</field> </block> </value> </block> <block type="lists_create_with"> <mutation items="0"></mutation> </block> <block type="lists_repeat"> <value name="NUM"> <shadow type="math_number"> <field name="NUM">5</field> </shadow> </value> </block> <block type="lists_length"></block> <block type="lists_isEmpty"></block> <block type="lists_create_with"> <mutation items="3"></mutation> </block> <block type="lists_getIndex"> <mutation statement="false" at="true"></mutation> <field name="MODE">GET</field> <field name="WHERE">FROM_START</field> <value name="VALUE"> <block type="variables_get"> <field name="VAR" id="@|eFaNfze;*D8(]KS}X)" variabletype="">list</field> </block> </value> </block> <block type="lists_setIndex"> <mutation at="true"></mutation> <field name="MODE">SET</field> <field name="WHERE">FROM_START</field> <value name="LIST"> <block type="variables_get"> <field name="VAR" id="@|eFaNfze;*D8(]KS}X)" variabletype="">list</field> </block> </value> </block> <block type="lists_getSublist"> <mutation at1="true" at2="true"></mutation> <field name="WHERE1">FROM_START</field> <field name="WHERE2">FROM_START</field> <value name="LIST"> <block type="variables_get"> <field name="VAR" id="@|eFaNfze;*D8(]KS}X)" variabletype="">list</field> </block> </value> </block> <block type="lists_split"> <mutation mode="SPLIT"></mutation> <field name="MODE">SPLIT</field> <value name="DELIM"> <shadow type="text"> <field name="TEXT">,</field> </shadow> </value> </block> <block type="lists_sort"> <field name="TYPE">NUMERIC</field> <field name="DIRECTION">1</field> </block> </category> <category name="Colour" colour="#A6745C"> <block type="colour_picker"> <field name="COLOUR">#ff0000</field> </block> <block type="colour_random"></block> <block type="colour_rgb"> <value name="RED"> <shadow type="math_number"> <field name="NUM">100</field> </shadow> </value> <value name="GREEN"> <shadow type="math_number"> <field name="NUM">50</field> </shadow> </value> <value name="BLUE"> <shadow type="math_number"> <field name="NUM">0</field> </shadow> </value> </block> <block type="colour_blend"> <value name="COLOUR1"> <shadow type="colour_picker"> <field name="COLOUR">#ff0000</field> </shadow> </value> <value name="COLOUR2"> <shadow type="colour_picker"> <field name="COLOUR">#3333ff</field> </shadow> </value> <value name="RATIO"> <shadow type="math_number"> <field name="NUM">0.5</field> </shadow> </value> </block> </category> <sep></sep> <category name="Variables" colour="#A65C81" custom="VARIABLE"></category> <category name="Functions" colour="#9A5CA6" custom="PROCEDURE"></category> </xml>;

ngOnInit() {
console.log('tt');
this.createBlocks();
}

createBlocks(){

this.workspacePlayground = Blockly.inject('blocklyDiv',
  {toolbox: this.toolbox});


return this.workspacePlayground;
}

generateCode() {
var code = Blockly.JavaScript.workspaceToCode(this.workspacePlayground);
var xmlLayout = Blockly.Xml.workspaceToDom(this.workspacePlayground);
var xmlText =Blockly.Xml.domToPrettyText(xmlLayout);
console.log(xmlText);
}

}

我有一个大错误： Blockly 没有定义。如何 ？提前致谢。热雷米

4

1 回答 1

0

看起来问题是因为您正在导入未压缩的块文件（blockly_uncompressed.js）。相反，您可以导入压缩文件。

我已经在这个答案中详细解释了这一点。

于 2019-07-23T02:43:44.150 回答