5

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

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

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

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

前：

在此处输入图像描述

后：

在此处输入图像描述

在 Dom 中检查，最初分配的样式仍然存在。

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

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

4

3 回答 3

8

不确定根本原因是什么，但*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>
于 2020-11-11T13:06:41.347 回答
2

首先，请注意该问题与角度分量无关。这都是关于摩纳哥编辑的。

摩纳哥如何找到它的实际布局？

考虑一个在容器内具有可见 Monaco 编辑器的页面。加载 Monaco 编辑器时，它会根据可见视图设置布局大小。那么，如果您在隐藏容器内请求更新摩纳哥，会发生什么？显然，Monaco 没有可见的视图来设置其布局道具。编辑器根据隐藏视图设置布局！这就是为什么你看到的是一个点而不是区域。.layout()现在，当此视图变为可见状态时，即使调用方法或设置automaticLayout: truein ，编辑器也不会更新布局options。您可以通过调整浏览器大小、再次更新编辑器或一些Angular 技巧来触发。

现在你明白它是如何工作的了。所以请避免在不可见的视图中更新摩纳哥。让它在包含视图变得可见后完成。

于 2020-11-11T17:30:12.887 回答
0

使用*ngIf将初始化/销毁ngx-monaco-editor组件，这可能有帮助也可能没有帮助。

当我有一个包含 a 的组件时ngx-monaco-editor，我创建了以下函数，每当我需要调整 monaco 编辑器的大小时我都会调用该函数。

    resizeComponents() {
        setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
        }, 200);
    }

使用示例：

看法

<div (click)="onTabChange('myTab')">Change Tab</div>

零件

onTabChange(myTab) {
   
    // execute tab change logic
    this.resizeComponents()
}

同样，如果您不想重新初始化编辑器，这是一种替代方法。

于 2021-07-09T19:12:14.863 回答