Динамическое обновление темы редактора Monaco в angular - PullRequest
Новая
       7

Динамическое обновление темы редактора Monaco в angular

0 голосов
/ 27 января 2020

Я пытаюсь динамически обновить тему редактора Монако одним нажатием кнопки. Это моя конфигурация редактора: 

htmlEditorOptions = {
    theme: "vs-light",
    automaticLayout:true,
    scrollBeyondLastLine: false,
    fontSize: this.font,
    minimap: {
      enabled: false
    },
    language: 'html'
}

Этот код в Angular: 

<ngx-monaco-editor 
    [ngStyle]="htmlStyle" 
    name="htmlCode" 
    [options]="htmlEditorOptions" 
    [(ngModel)]="htmlCode">
</ngx-monaco-editor>

При нажатии кнопки я пытаюсь обновить ее тему следующим образом: 

this.htmlEditorOptions.theme="vs-dark";

Я получаю обновленный объект, напечатанный на консоли, и я также могу отобразить обновленный объект в виде. Но редактор темы не меняется. Однако, если я инициализирую редактор с темной темой, тогда он работает, но не динамически. Что я могу делать не так?

1 Ответ

1 голос
/ 27 января 2020

Это можно сделать, изменив ввод параметров и изменив его ссылку (это потому, что компоненты Монако используют стратегию обнаружения изменений OnPu sh).

Например: component. html

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

component.ts 

editorOptions = {theme: 'vs-dark', language: 'javascript'};
....
changeTheme(theme: string) {
  this.editorOptions = { ...this.editorOptions, theme: theme }; // Or 
  Object.assign({}, this.editorOptions, {theme: theme});
}

источник: https://github.com/materiahq/ngx-monaco-editor/issues/6

...