摩纳哥 deltaDecorations 不适用于 Angular 7

Question

我正在尝试在我正在开发的应用程序中使用 Monaco 编辑器，我需要突出显示编辑器中显示的一些代码行。我目前正在为此使用角度组件 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'
        }
    }
]);

使用角度组件，我可以使用onInit 事件发射器访问editor 对象。我还比较了组件和操场中的对象，它们具有相同的属性，所以我认为它们是相同的。 为了在大应用程序之外测试它，我在 ngx-monaco-editor 文档之后开始了一个小角度项目，以比较匹配的代码。 但是，在操场上，当它不在我的应用程序中时，它会正确突出显示。

我查看了有关角度组件的问题，但没有看到任何此类问题。此外，它表示它支持摩纳哥提供的所有功能。我检查了我对 angular 和 monaco 使用相同的版本，它们是相同的。

我尝试使用角度组件重现游乐场示例：

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

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

Answer 1

问题实际上来自这样一个事实，即 monaco 不查找您的特定组件样式表，而是查找您应用程序的全局样式表。 标签设置正确，但由于根样式页面中没有对类样式的引用，因此没有任何更改或显示。

要解决这个问题，你需要在你的根样式文件中添加你的类并且它可以工作。

祝你有美好的一天:)