angular - 摩纳哥 deltaDecorations 不适用于 angular 7

Question

我正在尝试在我目前正在开发的应用程序中使用 Monaco Editor，我需要突出显示编辑器中显示的一些代码行。我目前为此使用 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 组件，我可以访问 editor对象使用 onInit事件发射器。我还比较了组件和操场中的对象，它们具有相同的属性，所以我认为它们是相同的。
为了在大型应用程序之外对其进行测试，我按照 ngx-monaco-editor 文档启动了一个小 Angular 项目，以比较匹配的代码。
但是，在操场上，这条线在我的应用程序中没有被正确突出显示。

我查看了 Angular 组件上的问题，但没有看到类似的内容。此外，它说它支持摩纳哥提供的所有功能。我检查过我对 angular 和 monaco 使用相同的版本，它们是相同的。

我尝试使用 angular 组件重现游乐场示例:
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 不查找您的特定组件样式表，而是查找您应用程序的全局样式表。
标签设置正确，但由于根样式页面中没有对类样式的引用，因此没有任何更改或显示。

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

祝你今天过得愉快 :)