5

我正在尝试将 microsoft monaco 编辑器与 angular 2 一起使用。我的组件是

declare const monaco: any;
declare const require: any;

export class MonacoEditorComponent implements AfterViewInit {
   ngAfterViewInit() {

        let onGotAmdLoader = () => {
            // Load monaco
            (<any>window).require(["vs/editor/editor.main"], () => {

                this.initMonaco();
            });
        };

        // Load AMD loader if necessary
        if (!(<any>window).require) {
            let loaderScript = document.createElement("script");
            loaderScript.type = "text/javascript";
            loaderScript.src = "vs/loader.js";
            loaderScript.addEventListener("load", onGotAmdLoader);
            document.body.appendChild(loaderScript);
        } else {
            onGotAmdLoader();
        }
    }

    initMonaco() {
        let myDiv: HTMLDivElement = this.editorContent.nativeElement;
        let options = this.options;
        options.value = this._value;
        options.language = this.language;
        this._editor = monaco.editor.create(myDiv, options);
   }
}

所以基本上,我试图首先通过检查window.require上的if条件来加载摩纳哥,一旦加载了摩纳哥的主editor.main文件,我就会尝试使用monaco.editor.create()创建一个编辑器。但即使在加载 editor.main.js 之后,它也无法解析 monaco。我尝试调试并查看 initMonaco 函数中 monaco 的值,它显示为不可用。难道我做错了什么?

注意:vs 已经解析为 monaco-editor/min/vs 了,它也可以将 js 文件加载到浏览器。此外,像 options 和 _value 这样使用的所有变量都在组件中声明(我从这里删除了它们)。

4

1 回答 1

4

如果其他人也在寻找这个,我能够解决这个问题,实际上问题是摩纳哥只会用它自己的加载器加载,我们在我们的项目中使用 systemjs 加载器。当我们尝试使用 monaco loader 提供的加载器时,它工作正常。不同之处在于 monaco loader 向 loader 添加了一些额外的功能,例如 config ,这些功能在 systemjs loader 中不可用。

于 2017-06-07T18:17:09.320 回答