ace-editor在angular9中的使用方式使用场景：把获取到的http响应数据中的一部分在网页上作为JSON形式

使用场景：把获取到的http响应数据中的一部分在网页上作为JSON形式展示

本文采用ng2-ace-editor

安装

npm install ng2-ace-editor -S

同时安装 json-stable-stringify

npm install json-stable-stringify -S

app.momodule.ts

import { AceEditorModule } from 'ng2-ace-editor';
@NgModule({  
    imports: [...,AceEditorModule],
    declarations: [],
    providers: [],
    bootstrap: [AppComponent],
})
...

app.component.html

<ace-editor #editor [(text)]="text" [autoUpdateContent]="true" [readOnly]="true"
    [options]="optionsConfig"    style="height:600px;" mode="json">
</ace-editor>

app.component.ts

import stringify from 'json-stable-stringify';
optionsConfig = {    //ace-editor 配置项
    maxLines: 1000, //最大行数
    printMargin: false,  //打印边距
    wrap: true //自动换行
}
text;
//...http response
this.xxx.xxx(...).subscribe((res: any) => {
    let target = res.data.xxx
    this.text = stringify(target,{ space: '     '})
}
...