以角度动态更新摩纳哥编辑器主题

Question

我正在尝试通过单击按钮动态更新摩纳哥编辑器的主题。这些是我的编辑器配置：

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

我在控制台上打印了更新的对象，并且我也能够在视图中显示更新的对象。但是，编辑器主题不会改变。但是，如果我使用深色主题初始化编辑器，那么它可以工作，但不能动态工作。我可能做错了什么？

Answer 1

这可以通过修改选项输入并更改其引用来完成（这是因为 monaco 组件使用 OnPush 更改检测策略）。

例如：组件.html

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

组件.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