Question

我目前正致力于将CodeMirror编辑器更精确地添加到项目，Angular2项目中。但我和＃39;无法做到这一点。我的编辑器的实例化似乎没有正常工作。我的代码如下：

editor.component.ts

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}});
    }
}

editor.html

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

在我的 index.html 文件中，我执行以下操作：

<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>

我以这种方式引导我的应用，但我不认为这是问题的来源。

boot.ts

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

bootstrap(AppComponent);

当我尝试运行应用程序时，firefox告诉我＆＃39; EXCEPTION：编辑器实例化时出错！＆＃39; ，以及＆＃39; ORIGINAL EXCEPTION：TypeError：textarea也为null＆＃39; 。关于发生了什么以及如何解决这个问题的任何想法？

感激不尽

Answer 1

非常感谢您的帮助，我按照链接中提供的一些提示进行操作，并使用指令进行操作。之后我也遇到了一些问题，但没什么大不了的：我只是不知道通过组件加载链接标签是不可能的。如果您正在阅读本文并遇到类似问题，那么这是我的解决方案：

editor.component.ts

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(){}
}

editor.directive.ts

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}});
    }
}

最后， index.html ：

<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>

Answer 2

您应该避免按angular 2 documentation使用ElementRef。特别是，你应该避免：

应用程序和渲染层之间的紧密耦合将导致无法将两者分开并将应用程序部署到Web工作者中。

改为使用Renderer2：

editor.directive.ts

@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}
      }
    );
  }
}

Answer 3

问题可能是你没有通过BrowserDomAdapter获取正确的DOM元素（我想它会从html根目录中查找textarea而不是从当前组件上下文中查找，这是不知道的它），从而文本框变为空。

以下是一些描述如何获取模板内部元素的引用并在组件代码中使用它的方法（例如，为了实例化代码镜像）：Angular2: What is the best way to get a reference of a template element

Answer 4

codemirror 上有一个 Angular 包装器 - ngx-codemirror - https://github.com/scttcper/ngx-codemirror。

将CodeMirror与Angular2（typescript）集成

4 个答案: