摩纳哥deltaDecorations消失在角7当模型改变

Question

有一个关于如何与伟大的例子 ( ngx摩纳哥编辑 )一起使用deltaDecorations (Ranges)的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;
}

在编辑器的init之后，似乎必须再次手动设置模型：

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;
}

只需在初始化在单击文件时触发的函数中的编辑器之前设置模型，就不起作用了，而不是：

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

我遇到了一个类似的问题:当我使用像theme/language这样的Object.assign()动态地改变这个吉特布问题时，装饰就消失了。

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

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