Angular 角度2中（ng2-）代码镜像的更改模式_Angular_Codemirror

Angular 角度2中（ng2-）代码镜像的更改模式

angular

Angular 角度2中（ng2-）代码镜像的更改模式,angular,codemirror,Angular,Codemirror,我设法使ng2 codemirror编辑器在我的Angular 2应用程序中完美工作，但有一个小细节让我感到困扰-我无法更改其模式，因为它需要导入.js文件，而我无法完成。我需要从路径node\u modules\codemirr\mode\clike\clike.js导入script，但似乎我不知道怎么做。我试图在index.html中导入它： <script src="node_modules/codemirror/mode/clike/clike.js"></script

我设法使

ng2 codemirror

编辑器在我的Angular 2应用程序中完美工作，但有一个小细节让我感到困扰-我无法更改其

模式，因为它需要导入.js
文件，而我无法完成。我需要从路径node\u modules\codemirr\mode\clike\clike.js
导入script
，但似乎我不知道怎么做。我试图在index.html
中导入它：
<script src="node_modules/codemirror/mode/clike/clike.js"></script>

模块
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 { }

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

组件
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() {
        //...
    }
}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“我的组件”，
templateUrl:'app/my_component/myComponent.html'
})
导出类MyComponent实现OnInit{
构造函数（）{}
codeToDisplay:字符串；
codeConfig={
行号：对，
只读：对，
模式：“text/x-java”好的，我刚刚设法让它工作，您需要执行以下操作：
将
添加到index.html
（非常感谢@PierreDuc）
导入要在组件中使用的模式
，在我的例子中是clike
模式：
导入'code镜像/mode/clike/clike'；

如果使用angular cli，则只需添加文件到angluar-cli.json并在组件中进行导入。无需将脚本添加到index.html
为什么不将其添加到index.html
？@PierreDuc我曾尝试过，但忘了提及。请查看我的更新帖子。可能也会将lib/codemirr.js
添加到index.html
中（在clike.js
上方）会有帮助的。但我不确定这是正确的方法。是的，我现在设法导入了脚本，尽管我的模式属性仍然不起作用。但这是另一个问题，感谢@pierreduc在这方面花了太多时间，从没想过添加导入！！我已经添加了。/node\u modules/codemirr/lib/codemirr.js
D。/node/modules/codemirr/mode/javascript/javascript.ts
到.angular cli.json，当codemirr成功加载时，代码高亮显示直到我添加导入才起作用。谢谢！您不知道这有多大帮助。
<div *ngIf="codeToDisplay">
    <codemirror [(ngModel)]="codeToDisplay" [config]="codeConfig"></codemirror>
</div>

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