我们如何将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阻止安装-
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>
角度会在此时抛出错误,表明它无法识别块状标签.因此,需要在模块中使用NO_ERRORS_SCHEMA或可以将工具栏XML表示为组件TS文件中的字符串,然后使用它进行块式注入.
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文件-
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 Angular
I have written an article explaining this in details here - Integrate Google Blockly with Angular
这篇关于我们如何将Blockly导入Angular 7应用程序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!