摩纳哥 deltaDecorations 不适用于 angular 7

Question

我正在尝试在我目前正在开发的应用程序中使用 Monaco 编辑器，我需要突出显示编辑器中显示的某些代码行。我目前正在为此使用 angular 组件 ngx-monaco-editor (www.npmjs.com/package/ngx-monaco-editor)。

我在摩纳哥游乐场看到了一种使用以下方法来做我想做的事情的方法：(https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-rendering-glyphs-in-the-margin)

var decorations = editor.deltaDecorations([], [
    {
        range: new monaco.Range(3,1,3,1),
        options: {
            isWholeLine: true,
            className: 'myContentClass',
            glyphMarginClassName: 'myGlyphMarginClass'
        }
    }
]);

使用 angular 组件，我可以使用 onInit 事件发射器访问 editor 对象。我还比较了组件中的对象和 playground 中的对象，它们具有相同的属性，所以我假设它们是相同的。为了在大型应用程序之外对其进行测试，我根据 ngx-monaco-editor 文档启动了一个 angular 小项目，以匹配代码进行比较。但是，在 playground 中，该行正确突出显示，而它不在我的应用程序中。

我查看了 angular 组件上的问题，没有发现任何问题。此外，它说它支持摩纳哥提供的所有功能。我检查过 angular 和 monaco 是否使用相同的版本，它们是相同的。

我尝试使用 angular 组件重现 playground 示例：

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

app.component.css

.myGlyphMarginClass {
    background: red;
}
.myContentClass {
    background: lightblue;
}

我检查了日志，装饰已正确初始化和创建，但它们在 playground 和控制台中是相同的。

Answer 1

问题实际上是因为 monaco 并不关注您的特定组件样式 sheet，而是关注您应用的全局样式 sheet。标签设置正确，但由于在根样式页面中没有对 class 样式的引用，因此没有任何更改或显示。

要解决此问题，您需要将 classes 添加到您的根样式文件中，它会起作用。

祝你有愉快的一天:)

摩纳哥 deltaDecorations 不适用于 angular 7

Monaco deltaDecorations not working with angular 7

monaco-editor

angular