Question

我正在使用最新的Angular和最新的MonacoEditor来创建一个应用程序，允许您直接在浏览器中编辑代码。直到今天，当我意识到当我在编辑器中进行悬停/单击/等操作时，我用来抓取DOM元素并绑定到MonacoEditor的@ViewChild元素每秒触发数百个更改检测周期时，我的一切工作都很好。

我正在使用此行来获取DOM元素的句柄：

@ViewChild('editor') editor;

我的视图如下：

<div class="row">
    <div #editor style="min-height:600px"></div>
</div>

最后将其引导到我的应用程序中：

this._editor = monaco.editor.create(this.editor.nativeElement, {
    language: 'powershell'
});

一旦运行了下面的最后一个代码，并将monaco编辑器附加到应用程序，摘要循环的数量突然增加了一吨。编辑器中的简单mousemove事件会导致更改检测，而我很快看到在短短几秒钟内发生了数千次检测。一旦我删除了代码的底行，所有的问题都会消失。

我被迫解决此问题的主要原因是某种程度上，这里的编辑器完全弄乱了另一个组件，并导致更改检测做了一些奇怪的事情，这些奇怪的事情又导致视图一次又一次地重新渲染。如果我曾经使用函数来获取可迭代的对象，则这种重新渲染会导致*ngFor循环失败。

我一直在讨论这个问题达数小时之久，直到我终于意识到这是由摩纳哥编辑引起的。我已经玩过ChangeDetectionRef类，但是分离变更检测似乎对编辑器没有任何影响。

我对Angular的最新版本（最近来自1.x）是相当陌生的，所以也许我只需要一种特殊的方式来引导该编辑器，所以它不会这样做。我希望能够手动控制检测，但是到目前为止，我还没有看到使用ChangeDetectionRef

更新

忘了提及我也尝试使用ChangeDetectionStrategy.OnPush来帮助控制变更检测，并且它似乎对正在发生的基础检测完全没有影响。

Answer 1

这可能是一个根本性的改变，但是您可以尝试使用https://github.com/atularen/ngx-monaco-editor（它是Monaco编辑器的Angular包装器），而不是尝试自己集成它。

@ViewChild属性导致奇怪的更改检测问题

1 个答案: