@ViewChild 属性 导致奇怪的变化检测问题

Question

我正在使用最新的 Angular 和最新的 MonacoEditor 来创建一个允许您直接在浏览器中编辑代码的应用程序。直到今天我才意识到我用来获取 DOM 元素并绑定到 MonacoEditor 的 @ViewChild 元素在 hover/clicking/etc 内部时每秒触发数百个更改检测周期编辑的。

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

@ViewChild('editor') editor;

我的观点是这样的：

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

最后 bootstrap 它在我的应用程序中：

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

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

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

在我终于意识到它是由摩纳哥编辑器引起的之前，我一直在研究这个问题几个小时。我玩过 ChangeDetectionRef class，但分离更改检测似乎对编辑器没有任何影响。

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

的工作

更新

忘了说我也尝试过使用 ChangeDetectionStrategy.OnPush 来帮助控制变化检测，但它似乎对正在发生的底层检测没有任何影响。

Answer 1

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