CodeMirror作为Angular2组件
我基于线程定义了一个codemirror组件,如下所示:CodeMirror作为Angular2组件,angular,typescript,custom-component,codemirror,Angular,Typescript,Custom Component,Codemirror,我基于线程定义了一个codemirror组件,如下所示: import {Component, OnInit, ElementRef, OnChanges, AfterViewInit} from "angular2/core"; @Component({ selector: 'codemirror', templateUrl: '<textarea id="codeMirrorEditor" style="display: none"></textarea&
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.
从“angular2/core”导入{Component,OnInit,ElementRef,OnChanges,AfterViewInit};
@组成部分({
选择器:“codemirror”,
templateUrl:“”
})
导出类CodeMirrorComponent实现OnInit、OnChanges和AfterViewInit{
高度:数字;
编辑器:codemirr.editor;
编辑元素:任何;
构造函数(elRef:ElementRef){
this.editorNativeElement=elRef.nativeElement;
}
恩戈尼尼特(){
}
ngAfterViewInit(){
this.editor=code镜像(this.editorNativeElement{
模式:“陈词滥调”,
行号:对
});
var code=“/**\r\n*该类将DrawableRect子类化,并向其绘制的矩形添加颜色\r\n**/\r\n公共类ColoredRect扩展了DrawableRect{\r\n//这些是此类定义的新字段。\r\n//x1、y1、x2和y2是从我们的超超类Rect继承的。\r\n@AnnotationTest\r\n受保护的颜色边框,fill;\r\n私有字符串名;\r\n\r\n/**\r\n*此构造函数使用super()调用超类构造函数,并且\r\n*也会自己进行一些初始化。\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/*此\r\n是块注释*/\r\n This.border=border;\r\n This.fill=fill;\r\n This.name=\“这是一个字符串\“;\r\n}\r\n\r\n/***\r\n*此方法重写我们的超类的draw()方法,以便它\r\n*可以使用已指定的颜色。\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.drawrectr(x1,y1,x2,y2);\r\n}\r\n}”
this.editor.setValue(代码);
this.editor.on('change',(编辑器:CodeMirror.editor)=>{
var value=this.editor.getDoc().getValue();
log(“值暴露:”,值);
});
}
ngOnChanges(更改:{}){
控制台。登录(“更改”);
}
更新高度(高度:数字){
高度=高度;
}
}
现在,可以用一段代码显示和初始化编辑器。但是,当我单击编辑器时,我得到了如下堆栈跟踪:
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.
异常:错误:执行的任务比计划的多。
异常:错误:计划了更多执行的任务。
堆栈跟踪:
错误:计划了更多执行的任务。
在ZoneDelegate.\u updateTaskCount(http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:398:24)
在ZoneDelegate.invokeTask(http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:369:27)
在Zone.runTask(http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:48)
在ZoneTask.invoke(http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:431:34)
-------------时间:104毫秒;时间:2016年4月6日星期三23:44:53 GMT-0500(COT)---
位于Object.Zone.longStackTraceZoneSpec.onScheduleTask(http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1354:23)
在ZoneDelegate.scheduleTask(http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:342:50)
在Zone.ScheduleMaroctask(http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:283:40)
在http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:133:26
在setTimeout时(在createNamedFn时求值(http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:973:18),正如评论中指出的,这是Angular+Zone+polyfills上的一个bug。
在这里,我将介绍一种解决方法:
我们注释掉了这句话:
在
node_modules\angular2\bundles\angular2-polyfills.js文件,第398行
source+更多解决方法:
看起来像