在 Angular 2 中更改 (ng2-)codemirror 的模式

Question

我设法使 ng2-codemirror 编辑器在我的 Angular 2 应用程序中完美运行，但有一个小细节让我感到烦恼 - 我无法更改它的 mode，因为它需要导入我无法完成的 .js 文件。我需要从路径 node_modules\codemirror\mode\clike\clike.js 导入 script，但我似乎不知道该怎么做。我试图在 index.html:

中导入它

<script src="node_modules/codemirror/mode/clike/clike.js"></script>

但是我得到以下错误：

Uncaught ReferenceError: CodeMirror is not defined

我将简化我的代码以便于理解问题：

system.config.js

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

      // other libraries
      'rxjs': 'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      'ng2-codemirror': 'npm:ng2-codemirror',
      'codemirror': 'npm:codemirror'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: { main: './main.js', defaultExtension: 'js' },
      rxjs: { defaultExtension: 'js' },
      'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
      'ng2-codemirror': { main: 'lib/Codemirror.js', defaultExtension: 'js' },
      'codemirror': { main: 'lib/codemirror.js', defaultExtension: 'js' }
    }
  });
})(this);

模块

import { NgModule } from '@angular/core';

import { myComponent } from './myComponent.cmp';

import { SharedModule } from '../shared/shared.module';

import { ROUTING } from './browseClasses.routing';

import { myService } from './myService .service';

import { CodemirrorModule } from 'ng2-codemirror';

@NgModule({
    imports: [
        SharedModule,
        ROUTING,
        CodemirrorModule
    ],
    exports: [],
    declarations: [
        myComponent
    ],
    providers: [
        myService
    ]
})

export class BrowseClassesModule { }

组件

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'my-component',
    templateUrl: 'app/my_component/myComponent.html'
})
export class MyComponent implements OnInit {

    constructor() { }

    codeToDisplay: string;
    codeConfig = {
    lineNumbers: true,
    readOnly: true,
    mode: "text/x-java" <--- I can't make this work
}

    ngOnInit() {
        this.codeToDisplay = this.getCode();
    }

    getCode() {
        //...
    }
}

模板

<div *ngIf="codeToDisplay">
    <codemirror [(ngModel)]="codeToDisplay" [config]="codeConfig"></codemirror>
</div>

index.html

<!DOCTYPE html>
<html>

<head>
  <title>ClassLoadingS1</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.ico" type="image/x-icon" />

  <!-- Polyfill(s) for older browsers -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/codemirror/lib/clike.js"></script>

  <link rel="stylesheet" type="text/css" href="app/css/styles.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="node_modules/codemirror/lib/codemirror.css" />

  <script src="systemjs.config.js"></script>
  <script>
  System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>

<body>
  <my-app>
    <div class="center-div">
      <img src="app/css/loading.gif">
    </div>
  </my-app>
</body>

</html>

Answer 1

好的，我刚刚成功了，您需要执行以下操作：

将<script src="node_modules/codemirror/lib/codemirror.js"></script>添加到index.html（非常感谢@PierreDuc）
导入 mode 你想在你的组件中使用，在我的例子中是 clike 模式：

import 'codemirror/mode/clike/clike';

Answer 2

如果使用 angular-cli，您只需将文件添加到 angular-cli.json 并在您的组件中导入。无需将脚本添加到 index.html

在 Angular 2 中更改 (ng2-)codemirror 的模式

Changing mode for (ng2-)codemirror in Angular 2

codemirror

angular