Angular项目中Blockly的repeat块结合自定义/预定义块失效如何解决

你当前只配置了Blockly的repeat循环块XML结构，没有引入对应JavaScript代码生成器规则，也没有通过Blockly官方API生成可执行代码，直接读取DOM的innerHTML执行自然会抛出语法错误。

• 确保Angular项目中已引入Blockly的JavaScript生成器依赖，模块化开发场景可提前导入对应包：

  import * as Blockly from 'blockly';
  import 'blockly/javascript';
  

• 注册（或确认已加载）controls_repeat_ext块的代码生成规则，官方默认规则如果未自动加载可手动补充：

  Blockly.JavaScript['controls_repeat_ext'] = function(block) {
    // 读取循环次数配置
    const repeatTimes = Blockly.JavaScript.valueToCode(block, 'TIMES', Blockly.JavaScript.ORDER_ATOMIC) || '0';
    // 读取循环内部的执行代码
    const loopInnerCode = Blockly.JavaScript.statementToCode(block, 'DO');
    // 拼接生成合法for循环代码
    return `for (let loopCount = 0; loopCount < ${repeatTimes}; loopCount++) {
      ${loopInnerCode}
    }`;
  };
  

• 修正代码执行逻辑，不要直接读取DOM内容执行，调用Blockly API从工作区生成代码：

  run.on(event.POINTER_DOWN ,(image) => {
    // 替换为你项目中实际声明的Blockly工作区实例变量
    const executableCode = Blockly.JavaScript.workspaceToCode(yourBlocklyWorkspaceInstance);
    eval(executableCode);
    console.log("running");
  });
  

• 额外校验：确认你在Blockly编辑器中已经把打印aa的输出块挂载到了repeat块的内部插槽中，否则循环体内无执行逻辑不会输出内容。

内容的提问来源于stack exchange，提问作者HABIB LEILA