1

我有一个 Angular 应用程序，其中包含一个非常简单的所见即所得编辑器组件：

组件.html

<textarea [id]="editorId"></textarea>

组件.ts

editorId: string;
constructor() {
   this.editorId = Math.random().toString(36).substring(2, 15);
}
ngAfterViewInit(){
   // @ts-ignore
   editorLibrary.init(this.editorId);
}

我使用了一个在本例中简化为 editorLibrary 的 javascript 库，它是一个全局 js 变量，我可以在其上执行诸如初始化编辑器之类的操作。我需要 ts-ignore，因为我不只是在这个组件中导入它。

这一切都很好，除了在我初始化编辑器后渲染突然变得非常慢。当我更改一个值时，其他组件只会在几秒钟后重新渲染，而之前的更改是即时的。

我的理论是，所见即所得的编辑器库在我的文本区域旁边生成了第二个 html 元素，它有大量的子元素，我认为当发生变化时，角度会解析所有这些，这会减慢它的速度。

有没有办法告诉 Angular 完全忽略编辑器生成的元素？因为它都是 vanilla-js，所以我不需要任何 changeDetection 或变量替换，我认为如果 angular 完全忽略这些元素，我的性能会提高。我已经尝试过 changeDetectorRef.detach() 和 zone.runOutsideAngular() 并尝试使用 elementRef 添加元素，而不是直接在我的 html 文件中。渲染仍然很慢。

然而，用户界面并没有滞后，但是在更改变量后从角度更新只会花费大量时间。有没有其他方法可以调试这个原因？（也许是高级日志级别，我可以看到 Angular 在后台做什么）或者有没有人知道我如何告诉 Angular “这个 html 是纯 js，你不需要看它，解析它，改变它甚至知道它的存在”

4

0 回答 0