Монако дельтаДекорации не работают с угловой 7 - PullRequest
Новая
       18

Монако дельтаДекорации не работают с угловой 7

0 голосов
/ 26 июня 2019

Я пытаюсь использовать Monaco Editor в приложении, которое я сейчас разрабатываю, и мне нужно выделить несколько строк кода, отображаемых в редакторе. В настоящее время я использую угловой компонент 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'
        }
    }
]);

Используя угловой компонент, я могу получить доступ к объекту editor с помощью генератора событий onInit. Я также сравнил объект из компонента и на игровой площадке, и они имеют одинаковые свойства, поэтому я предположил, что они были одинаковыми. Чтобы проверить его вне большого приложения, я запустил небольшой угловой проект, следуя документации ngx-monaco-editor, чтобы получить соответствующий код для сравнения. Однако на игровой площадке линия правильно выделена, а ее нет в моем приложении.

Я посмотрел на проблемы с угловым компонентом и ничего подобного не увидел. Более того, он говорит, что поддерживает все функции, предоставляемые Монако. Я проверил, что я использую одну и ту же версию для угловых и монако, и они одинаковы.

Я попытался воспроизвести пример игровой площадки, используя угловой компонент:

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

Я проверил с помощью журналов, что украшения правильно инициализированы и созданы, но они одинаковы для детской площадки и консоли.

1 Ответ

0 голосов
/ 27 июня 2019

Проблема фактически заключается в том, что monaco смотрит не на вашу таблицу стилей конкретного компонента, а на глобальную таблицу стилей вашего приложения. Теги установлены правильно, но поскольку на корневой странице стилей нет ссылки на стиль класса, ничего не меняется и не отображается.

Чтобы решить эту проблему, вам нужно добавить свои классы в корневой файл стиля, и он работает.

Хорошего дня:)

...