Свойство @ViewChild вызывает странные проблемы с обнаружением изменений - PullRequest
Новая
       7

Свойство @ViewChild вызывает странные проблемы с обнаружением изменений

0 голосов
/ 05 февраля 2019

Я использую последнюю версию Angular вместе с последней MonacoEditor , чтобы создать приложение, позволяющее редактировать код прямо в браузере.У меня все это прекрасно работало до сегодняшнего дня, когда я понял, что элемент @ViewChild, который я использую для захвата элемента DOM и привязки к MonacoEditor, запускает сотни циклов обнаружения изменений каждую секунду при наведении курсора / нажатии / и т.д. внутри редактора.

Я использую эту строку, чтобы получить дескриптор элемента 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'
});

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

Основная причина, по которой я вынужден это исправить, заключается в том, что редактор здесь вообще портит другой компонент и заставляет обнаружение изменений выполнять некоторые действия.странные вещи, которые, в свою очередь, заставляют представления перерисовываться снова и снова.Этот повторный рендеринг приводит к сбою моих циклов *ngFor, если я когда-либо использую функцию для получения итерируемого объекта.

Я часами ковырялся в этой проблеме, прежде чем наконец понял, что она была вызвана редактором Monaco.,Я поиграл с классом ChangeDetectionRef, но отключение обнаружения изменений, похоже, не влияет на редактор.

Я довольно новичок в последних версиях Angular (недавно вышедших из 1.x) так что, возможно, мне просто нужен особый способ начальной загрузки этого редактора, чтобы он этого не делал.Я хочу иметь возможность управлять обнаружением вручную, но я пока не видел эту работу, используя ChangeDetectionRef

ОБНОВЛЕНИЕ

Забыл упомянуть, что япытался также использовать ChangeDetectionStrategy.OnPush, чтобы помочь контролировать обнаружение изменений, и это, похоже, никак не влияет на происходящее базовое обнаружение.

1 Ответ

0 голосов
/ 05 февраля 2019

Это может быть несколько радикальным изменением, но вы можете попробовать https://github.com/atularen/ngx-monaco-editor, который является угловой оболочкой для редактора Monaco, а не пытаться интегрировать его самостоятельно.

...