ng2-ace-editor

To use Angular 4 install version 0.3.1 (npm i -S ng2-ace-editor@0.3.1).

Install

npm i -S ng2-ace-editor or yarn add ng2-ace-editor

Load the module for your app:

import { AceEditorModule } from 'ng2-ace-editor';

@NgModule({

  ...

  imports: [

    ...

    AceEditorModule

  ]

})

Use Component

Use directive
Minimal

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

@Component({
 template: `
 <div ace-editor
      [(text)]="text" // possible two way binding (thx ChrisProlls)
      ></div>
 `
})
export class MyComponent {
   text:string = "";
}
Complete

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

@Component({
 template: `
 <div ace-editor
      [(text)]="text" // possible two way binding (thx ChrisProlls)
      [mode]="'sql'" //string or object (thx ckiffel)
      [theme]="'eclipse'"
      [options]="options"
      [readOnly]="false"
      [autoUpdateContent]="true" //change content when [text] change
      [durationBeforeCallback]="1000" //wait 1s before callback 'textChanged' sends new value
      (textChanged)="onChange($event)"
      style="min-height: 200px; width:100%; overflow: auto;"></div>
 `
})
export class MyComponent {
   text:string = "";
   options:any = {maxLines: 1000, printMargin: false};
   
   onChange(code) {
       console.log("new code", code);
   }
}

Keywords

使用简化解析

注意：在"projects"下的"front":下"architect":下"build":的"options":中添加以下引用

"scripts": [
                            "./node_modules/ace-builds/src-min/ace.js",
                            "./node_modules/ace-builds/src-min/theme-eclipse.js",
                            "./node_modules/ace-builds/src-min/mode-yaml.js"
                        ]

使用步骤：
1.yarn或npm下载ace
2.HTML中写入对应div代码（对应参数根据自己需要书写，比如model类型可以使yaml等）
3.ts中引入对用参数。text是你的json数据

ace-editor编辑json插件（HTML中的json排版）