在 angular 中动态更新摩纳哥编辑器主题

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 更改检测策略）。

例如： 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

在 angular 中动态更新摩纳哥编辑器主题

Updating monaco editor theme dynamically in angular

monaco-editor

angular