Fatal编程技术网
  • typescript/
  • 将CodeMirror与Angular2（typescript）集成

将CodeMirror与Angular2（typescript）集成

typescript angular

将CodeMirror与Angular2（typescript）集成,typescript,angular,codemirror,Typescript,Angular,Codemirror,我目前正在为一个项目添加一个CodeMirror编辑器，更准确地说是Angular2项目。但是我做这件事有困难。我的编辑器的实例化似乎无法正常工作。我的代码如下： editor.component.ts editor.html 当我尝试运行应用程序时，firefox告诉我“异常：编辑器实例化时出错！”，还有“原始异常：TypeError:textarea为空”。你知道发生了什么，怎么解决吗 非常感谢您，问题可能是您没有通过BrowserDomAdapter获取正确的DOM元素（我猜它将从html

我目前正在为一个项目添加一个CodeMirror编辑器，更准确地说是Angular2项目。但是我做这件事有困难。我的编辑器的实例化似乎无法正常工作。我的代码如下：

editor.component.ts

editor.html

当我尝试运行应用程序时，firefox告诉我“异常：编辑器实例化时出错！”，还有“原始异常：TypeError:textarea为空”。你知道发生了什么，怎么解决吗

非常感谢您，问题可能是您没有通过BrowserDomAdapter获取正确的DOM元素（我猜它将从html根目录而不是当前组件上下文中查找textarea，它不知道），因此textbox将为空

这里有一些方法描述了如何在模板中获取对元素的引用，并在组件代码中使用该引用（例如，为了实例化codemirror）：

非常感谢您的帮助，我遵循了链接中给出的一些提示，并使用了一条指令。之后我也遇到了一些问题，但没什么大不了的：我只是不知道通过组件加载链接标签是不可能的。如果您在阅读本文时遇到类似问题，以下是我的解决方案：

editor.component.ts

最后，index.html：


角度2和码镜
System.config({
包：{
平均2页：{
格式：'寄存器'，
defaultExtension:'js'
}
}
});
System.import（'meang2app/dist/editor.component'）
.then（null，console.error.bind（console））；
加载
您应避免按照使用ElementRef。尤其应避免：

应用程序层和呈现层之间的紧密耦合使得不可能将两者分离并将应用程序部署到web worker中

改用：

editor.directive.ts

codemirror上有一个角度的包装器-
ngx codemirror
-。

非常有用，非常感谢，对于未来的查看者，
指令
已从
组件
中删除。见下文： 
import {Component} from 'angular2/core'
import {BrowserDomAdapter} from 'angular2/platform/browser'

declare var CodeMirror: any;

@Component({
    selector: 'editor',
    templateUrl: './meang2app/partials/editor.html'
})

export class Editor{
    dom: BrowserDomAdapter;
    editor: any;
    constructor(){
        this.dom = new BrowserDomAdapter();
        this.editor = new CodeMirror.fromTextArea(this.dom.query("textarea"), {lineNumbers: true, mode: {name: "javascript", globalVars: true}});
    }
}

<textarea id="code" name="code">
    <!-- Where a CodeMirror instance should be rendered -->
</textarea>

<html>
<head>

    <title>Angular 2</title>

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="codemirror/lib/codemirror.js"></script>
    <script src="codemirror/addon/hint/show-hint.js"></script>
    <script src="codemirror/addon/hint/javascript-hint.js"></script>
    <script src="codemirror/mode/javascript/javascript.js"></script>

    <script>
        System.config({
            packages: {        
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/dist/boot')
            .then(null, console.error.bind(console));
    </script>

</head>

<body>
        <app>Loading</app>
</body>

</html>

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

import {Component, ElementRef} from 'angular2/core'
import {EditorDirective} from './editor.directive'

@Component({
    selector: 'editor',
    template: `
    <textarea editor id="code" name="code">
        // Some content
    </textarea>
`,
    directives: [EditorDirective]
})


export class EditorComponent{
    constructor(){}
}

import {Directive, ElementRef, Renderer} from 'angular2/core'

declare var CodeMirror: any;

@Directive({
    selector: '[editor]'
})

export class EditorDirective {
    editor: any;
    constructor(public element: ElementRef, public renderer: Renderer){
        this.editor = new CodeMirror.fromTextArea(element.nativeElement, {lineNumbers: true, mode: {name: "javascript", globalVars: true}});
    }
}

<html>
    <head>

    <title>Angular 2 and CodeMirror</title>

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="codemirror-5.14.2/lib/codemirror.js"></script>
    <script src="codemirror-5.14.2/addon/hint/show-hint.js"></script>
    <script src="codemirror-5.14.2/addon/hint/javascript-hint.js"></script>
    <script src="codemirror-5.14.2/mode/javascript/javascript.js"></script>
    <script src="codemirror-5.14.2/mode/markdown/markdown.js"></script>

    <link rel=stylesheet href="codemirror-5.14.2/doc/docs.css">
    <link rel="stylesheet" href="codemirror-5.14.2/lib/codemirror.css">
    <link rel="stylesheet" href="codemirror-5.14.2/addon/hint/show-hint.css">

    <script>
        System.config({
            packages: {        
                meang2app: {
                format: 'register',
                defaultExtension: 'js'
                }
            }
        });
      System.import('meang2app/dist/editor.component')
          .then(null, console.error.bind(console));
    </script>

    </head>

  <body>
      <app>Loading</app>
  </body>

</html>

@Directive({
  selector: '[editor]'
})
export default class EditorDirective {
  editor: any;

  constructor(private _renderer: Renderer) {}

  ngAfterViewInit() {
    this.editor = CodeMirror.fromTextArea(
      this._renderer.selectRootElement('[editor]'),
      {
        lineNumbers: true, 
        mode: {name: "javascript", globalVars: true}
      }
    );
  }
}