ngx-monaco-editor - 容器更改时无法设置布局大小（使用选项卡面板）

Question

我正在努力处理ngx-monaco-editor一个primeng 选项卡面板内部的实例，该实例在切换到另一个选项卡时似乎会丢失其大小计算，更改绑定到编辑器的模型值，然后再次切换回初始选项卡。

https://stackblitz.com/edit/primeng9-tabs-monaco-editor

使用上述 URL 进行复制的步骤：

• 最初将选择“编辑器”选项卡
• 选择“标签 2”
• 单击“更改代码”按钮
• 改回“编辑器”选项卡，现在可以看到编辑器缩小了

前：

后：

在 Dom 中检查，最初指定的样式仍然存在。

正如您从示例应用程序的源代码中看到的那样，我还尝试layout在选项卡更改事件中使用编辑器的方法来尝试根据容器强制重新计算大小，但这没有任何区别

有趣的是，如果我调整窗口大小，这似乎会触发编辑器组件再次正确调整大小。

Answer 1

不确定根本原因是什么，但*ngIf在编辑器容器上使用可以解决问题。请看看这个——

handleTabChange(tabChangeEvent: { originalEvent: Event; index: number }) {
    if (tabChangeEvent.index === 0) {
      //this.monacoEditor.editor.layout();
      this.showEditor = true;
    } else {
      this.showEditor = false;
    }
  }

然后在您的模板中 -

<div style="height: 500px" *ngIf="showEditor">
            <ngx-monaco-editor #monacoEditor style="height:100%;" [options]="editorOptions" [(ngModel)]="code">
            </ngx-monaco-editor>
        </div>