ngx-codemirror-无法在XML消息中使用折叠装订线

Question

我有一个Angular应用程序，并且我正在使用ngx-codemirror在各自的应用程序中构建一个代码镜像。在ngx-codemirror中，有一个名为foldgutter的选项，我已经实现了。

app.component.ts

  public codeMirrorOptions: any = {
    theme: 'material',
    lineNumbers: true,
    lineWrapping: true,
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
    autoCloseBrackets: true,
    matchBrackets: true
  };

app.component.html

  <ngx-codemirror [(ngModel)]="selectedMessageBody"
                                        [options]="codeMirrorOptions">
                        </ngx-codemirror>

通过设置相应的值，如果消息是JSON，则可以使用折叠装订线，但是如果是XML，则文件夹装订线选项不可见。

我不确定我缺少什么。

STACKBLITZ DEMO => https://stackblitz.com/edit/ngx-codemirror-dmo9cy

还有没有其他可用的软件包来解决此问题？

Answer 1

您错过了导入下面的两个

import 'codemirror/mode/xml/xml';
import 'codemirror/addon/fold/xml-fold';

并且您还需要在mode:xml下设置codeMirrorOptions。通常人们的错误是使用application/xml，这也是我朋友的情况：）

快乐编码

Answer 2

您需要添加您的模块

import 'codemirror/mode/xml/xml';
import 'codemirror/addon/fold/xml-fold';

并将app.component选项更改为

<ngx-codemirror #codemirrorr
   [options]="{
    lineNumbers: true,
    theme: 'idea',
    mode: 'application/xml',
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
    foldGutter: true,
     autoCloseBrackets: true,
    matchBrackets: true,
    lineWrapping: true,
    lint: true
  }"
  [(ngModel)]="xmlString"
  (ngModelChange)="setEditorContent($event)">
</ngx-codemirror>

STACKBLITZ DEMO