CodeMirror作为Angular2组件

塞尔吉奥

我已经基于线程定义了一个codemirror组件:如何在Angular2 Component中访问codemirror文本区域值?,看起来像这样:

import {Component, OnInit, ElementRef, OnChanges, AfterViewInit} from "angular2/core";

@Component({
    selector: 'codemirror',
    templateUrl: '<textarea id="codeMirrorEditor" style="display: none"></textarea>'
})
export class CodeMirrorComponent implements OnInit,OnChanges, AfterViewInit {

    height:number;

    editor:CodeMirror.Editor;

    editorNativeElement:any;

    constructor(elRef:ElementRef) {
        this.editorNativeElement = elRef.nativeElement;
    }

    ngOnInit() {
    }

    ngAfterViewInit() {
        this.editor = CodeMirror(this.editorNativeElement, {
            mode: "clike",
            lineNumbers: true
        });

        var code = "/**\r\n * This class subclasses DrawableRect and adds colors to the rectangle it draws\r\n **/\r\npublic class ColoredRect extends DrawableRect {\r\n  // These are new fields defined by this class.\r\n  // x1, y1, x2, and y2 are inherited from our super-superclass, Rect.\r\n  @AnnotationTest\r\n  protected Color border, fill;\r\n  private String name;\r\n\r\n  /**\r\n   * This constructor uses super() to invoke the superclass constructor, and\r\n   * also does some initialization of its own.\r\n   **/\r\n  public ColoredRect(int x1, int y1, int x2, int y2, Color border, Color fill){\r\n    super(x1, y1, x2, y2);\r\n    /* This\r\n    is a block comment */\r\n    this.border = border;\r\n    this.fill = fill;\r\n    this.name = \"This is a string\";\r\n  }\r\n\r\n  /**\r\n   * This method overrides the draw() method of our superclass so that it\r\n   * can make use of the colors that have been specified.\r\n   **/\r\n  public void draw(Graphics g) {\r\n    g.setColor(fill);\r\n    g.fillRect(x1, y1, x2, y2);\r\n    g.setColor(border);\r\n    g.drawRect(x1, y1, x2, y2);\r\n  }\r\n}"

        this.editor.setValue(code);
        this.editor.on('change', (editor: CodeMirror.Editor) => {
            var value = this.editor.getDoc().getValue();
            console.log("Value exposed:", value);
        });
    }

    ngOnChanges(changes:{}) {
        console.log("on changes");
    }

    updateHeight(height:number) {
        this.height = height;
    }
}

现在,可以显示编辑器并使用一段代码对其进行初始化。但是,当我单击编辑器时,我得到了如下的堆栈跟踪:

EXCEPTION: Error: More tasks executed then were scheduled.
EXCEPTION: Error: More tasks executed then were scheduled.
STACKTRACE:
Error: More tasks executed then were scheduled.
    at ZoneDelegate._updateTaskCount (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:398:24)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:369:27)
    at Zone.runTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:48)
    at ZoneTask.invoke (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:431:34)
  -------------   Elapsed: 104 ms; At: Wed Apr 06 2016 23:44:53 GMT-0500 (COT)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1354:23)
    at ZoneDelegate.scheduleTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:342:50)
    at Zone.scheduleMacroTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:283:40)
    at http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:133:26
    at setTimeout (eval at createNamedFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:973:18), <anonymous>:3:37)
    at Delayed.set (http://localhost:3000/node_modules/codemirror/lib/codemirror.js:8263:15)
    at TextareaInput.copyObj.slowPoll (http://localhost:3000/node_modules/codemirror/lib/codemirror.js:1390:21)
    at http://localhost:3000/node_modules/codemirror/lib/codemirror.js:1392:43
  -------------   Elapsed: 101 ms; At: Wed Apr 06 2016 23:44:53 GMT-0500 (COT)   -------------  
    at Object.Zone.longStackTraceZoneSpec.onScheduleTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1354:23)
    at ZoneDelegate.scheduleTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:342:50)
    at Zone.scheduleMacroTask (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:283:40)
    at http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:133:26
    at setTimeout (eval at createNamedFn (http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:973:18), <anonymous>:3:37)
    at Delayed.set (http://localhost:3000/node_modules/codemirror/lib/codemirror.js:8263:15)
    at TextareaInput.copyObj.slowPoll (http://localhost:3000/node_modules/codemirror/lib/codemirror.js:1390:21)
    at http://localhost:3000/node_modules/codemirror/lib/codemirror.js:1392:43
Uncaught Error: More tasks executed then were scheduled.

我该如何解决?


更新:Plunker演示

塞尔吉奥

如评论中所指出的,这是有关Angular + Zone + Polyfills的错误。在这里,我描述了一种解决方法:

我们注释掉了这一行:

throw new Error('More tasks executed then were scheduled.');

在里面

node_modules \ angular2 \ bundles \ angular2-polyfills.js文件,第398行

来源+更多解决方法:https : //github.com/angular/angular/issues/7721

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章