angular - “typeof Blockly”类型上不存在属性“JavaScript”

Question

我将 Google“Blockly”库集成到 Angular 项目中，但是当我想将工作区的元素转换为 javascript 代码时出现以下错误。我使用香草脚本在同一个库中做了一个例子，没有问题。我想知道您是否有任何解决此错误的建议，谢谢。

使用 vanilla 脚本的演示

我的组件代码：

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

import * as Blockly from 'blockly';

@Component({
  selector: 'app-blockly',
  templateUrl: './blockly.component.html',
  styleUrls: ['./blockly.component.css']
})
export class BlocklyComponent implements OnInit {

  workspace: any;

  ngOnInit(): void {

    const toolbox = `
    <xml id="toolbox" style="display: none">
    <category name="Variables" custom="VARIABLE" colour="330"></category>
    <category name="Functions" custom="PROCEDURE" colour="330"></category>
    <category name="Logic" colour="210">
        <block type="controls_if"></block>
        <block type="logic_compare"></block>
        <block type="logic_operation"></block>
        <block type="logic_boolean"></block>
    </category>
    <category name="Loops" colour="120">
        <block type="controls_whileUntil"></block>
        <block type="controls_repeat_ext"></block>
        <block type="controls_for"></block>
    </category>
    <category name="Math" colour="230">
        <block type="math_number"></block>
        <block type="math_arithmetic"></block>
    </category>
    <category name="Functions" colour="290" custom="PROCEDURE"></category>
    <category name="Text" colour="150">
        <block type="text"></block>
        <block type="text_print"></block>
    </category>
    <category name="Login" colour="300">
        <block type="login"></block>
    </category>
    </xml>`;

    this.workspace = Blockly.inject('blocklyDiv',
      {
        toolbox,
        zoom:
        {
          controls: true,
          wheel: true,
          startScale: 1.0,
          maxScale: 2,
          minScale: 0.5,
          scaleSpeed: 1.2
        }
      });

    this.workspace.addChangeListener(this.Update);

  }

  Update(event) {

    let code = Blockly.JavaScript.workspaceToCode(this.workspace);
    document.getElementById('code').innerHTML = code;

  }
}

Answer 1

我找到了一种解决方案：

//Update generated code
  Update(event) {
     
     let code = (Blockly as any).JavaScript.workspaceToCode(Blockly.mainWorkspace);
     document.getElementById('code').innerHTML = code;

  }