gpt4 book ai didi

angular - 我们如何将 Blockly 导入 Angular 7 应用程序?

转载 作者:太空狗 更新时间:2023-10-29 19:32:19 24 4
gpt4 key购买 nike

我正在尝试在 Angular 7 应用程序中使用 Blockly,但我无法注入(inject) 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;
}

给出与上面相同的错误。

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

最佳答案

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

使用 npm block 安装 -

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

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

    "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 文件中添加以下行 -

  <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 此时会抛出错误,说它不识别 block 状标签。所以需要在模块中使用 NO_ERRORS_SCHEMA 或者可以在组件 TS 文件中将工具栏 XML 表示为字符串并使用它来 block 注入(inject)。

我的组件 TS 文件 -

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']);
}
}

我在这里写了一篇文章对此进行了详细解释 - Integrate Google Blockly with Angular

关于angular - 我们如何将 Blockly 导入 Angular 7 应用程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52921698/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com