Блог

У меня есть приложение angular, которое содержит один очень простой компонент для редактора wysiwyg:

component.html

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

component.ts

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

Я использую библиотеку javascript, которую я упростил в этом примере до editorLibrary, которая является глобальной js-переменной, с помощью которой я могу делать такие вещи, как инициализация редактора. Мне нужен ts-ignore, потому что я не импортирую его только в этот компонент.

Все это отлично работает, за исключением того, что после того, как я инициализировал редактор, рендеринг внезапно становится чрезвычайно медленным. Когда я изменяю значение, другие компоненты повторно отображаются только через несколько секунд, когда изменение было мгновенным раньше.

Моя теория по этой причине заключается в том, что библиотека wysiwyg-editor генерирует второй html-элемент рядом с моей текстовой областью, который содержит множество подэлементов, и я думаю, что angular анализирует все это, когда происходит изменение, которое замедляет его.

Есть ли какой-либо способ указать angular полностью игнорировать элементы, созданные редактором? Поскольку это все vanilla-js, мне не нужно никаких изменений или замен переменных, и я думаю, что моя производительность увеличилась бы, если бы angular просто полностью игнорировал эти элементы. Я уже пробовал ChangeDetectorRef.detach() и zone.runOutsideAngular() и попытался добавить элемент с помощью ElementRef вместо того, чтобы иметь его непосредственно в моем html-файле. Рендеринг по-прежнему очень медленный.

Однако пользовательский интерфейс не отстает, но обновления из angular после изменения переменной просто занимают много времени. Есть ли какой-либо другой способ отладить причину этого? (возможно, расширенные уровни журнала, где я могу видеть, что angular делает в фоновом режиме) Или у кого-нибудь есть идея, как я могу сказать angular: «этот html — это чистый js, вам не нужно смотреть на него, анализировать его, изменять или даже знать, что он там»