当模型更改时，摩纳哥 deltaDecorations 在 angular 7 中消失

Question

有一个 of how to use the ngx monaco editor with deltaDecorations（范围）：

app.component.html

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code" (onInit)="onInit($event)"></ngx-monaco-editor>

app.component.ts

editorOptions = {
    theme: 'vs',
    language: 'javascript',
    glyphMargin: true
  };
code = [
    '"use strict";',
    'function Person(age) {',
    '   if (age) {',
    '       this.age = age;',
    '   }',
    '}',
    'Person.prototype.getAge = function () {',
    '   return this.age;',
    '};'
  ].join('\n');

onInit(editor: any) {
  const t = editor.deltaDecorations([], [
    {
      range: new monaco.Range(3, 1, 3, 1),
      options: {
        isWholeLine: true,
        className: 'myContentClass',
        glyphMarginClassName: 'myGlyphMarginClass'
      }
    }
  ]);
  console.log(t);
}

在 ngOnInit 上一切正常。但是当我更改 ngModel 时，代码的突出显示消失了：

onFileClicked() {
    this.code = "this is some other code'\n'
    that needs to be'\n'
    highlighted just like'\n'
    the first one."
}

当我现在再次更改ngModel时，旧模型的代码会在很短的时间内突出显示，但是一旦启动新模型，旧模型就会消失。新模型的代码也应该突出显示，但没有。

我在这里错过了什么？

Answer 1

找到了一个有效的解决方案，但我真的不知道为什么。

我有一个初始化新编辑器的函数：

onFileClicked(file) {

    // Angular @Input setter detects only object updates,
    // so property updates are not handled =
    // we need to update whole object when language changes
    this.editorOptions = {
        theme: "vs",
        language: this.langDetect.getLanguage(file),
        readOnly: true,
        automaticLayout: true
    };

    this.code = file.data;
    this.ranges = file.ranges;
}

编辑器初始化后好像又要手动设置模型了:

onEditorInit(editor: any) {
    const model = monaco.editor.getModels()[0];
    monaco.editor.setModelLanguage(model, this.editorOptions.language);
    model.setValue(this.code);

    if (this.coverage) {
        let ranges = this.buildEditorRanges(this.coverage);
        editor.deltaDecorations([], ranges);
    }
}

buildEditorRanges(ranges) {
    let editorRanges = [];
    let options = {
        isWholeLine: true,
        className: "code-highlight",
        glyphMarginClassName: "code-highlight"
    };
    ranges.forEach(function(range) {
        editorRanges.push({
            range: new monaco.Range(
                range.startLine,
                range.startColumn,
                range.endLine,
                range.endColumn
            ),
            options: options
        });
    });
    return editorRanges;
}

在单击文件时触发的函数中初始化编辑器之前简单地设置模型 NOT 工作：

onFileClicked(file) {

    this.code = file.data;
    // Angular @Input setter detects only object updates,
    // so property updates are not handled =
    // we need to update whole object when language changes
    this.editorOptions = {
        theme: "vs",
        language: this.langDetect.getLanguage(file),
        readOnly: true,
        automaticLayout: true
    };


    this.ranges = file.ranges;
}

Answer 2

我遇到了类似的问题：当我像this Github issue一样使用Object.assign()动态更改theme/language时，装饰消失了。

我找到了一个解决方案：使用 monaco.editor.setModelLanguage() 和 monaco.editor.setTheme()

不过不确定是否要更改代码内容

当模型更改时，摩纳哥 deltaDecorations 在 angular 7 中消失

Monaco deltaDecorations disappear in angular 7 when model changes

monaco-editor

angular