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

Question

我正在为一个 ngx-monaco-editor 的实例而苦苦挣扎在似乎是 的primeng 选项卡面板内丢失其大小计算 切换到另一个选项卡时，更改绑定(bind)到编辑器的模型值，然后再次切换回初始选项卡。
https://stackblitz.com/edit/primeng9-tabs-monaco-editor
使用上述 URL 进行复制的步骤:

最初将选择“编辑器”选项卡

选择“标签 2”

单击“更改代码”按钮

切换回“编辑器”选项卡，现在可以看到编辑器的大小缩小了

前:

后:

在 Dom 中检查，最初指定的样式仍然存在。
正如您从我的示例应用程序的源代码中看到的，我也尝试使用编辑器的 layout选项卡更改事件中的方法尝试根据容器强制重新计算大小，但这没有任何区别
有趣的是，如果我调整窗口大小，这似乎会触发编辑器组件再次正确调整大小。

Answer 1

不确定根本原因是什么，但使用 *ngIf在编辑器容器上修复了这个问题。请看this ——

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>