Почему бы не взаимодействовать с DOM напрямую в Angular?

Question

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

const itemToManipulate = document.getElementById('example');

Поэтому я прочитал хороший обходной путь - использование директивы ElementRef.Но продолжайте, чтобы найти, что Angular Documents советуют об этом из-за сильной связи, что такое жесткая связь?

Находится в документации здесь

Я согласился на использование ViewChild,вот так ...

@ViewChild('itemToManipulate') public item: ElementRef<any>; 

Приводит ли это к нежелательному поведению, о котором я должен беспокоиться (с точки зрения безопасности / производительности), и есть ли лучшая практика взаимодействия с DOM, или это не следует делатьв пределах угловой (6/7)?

Заранее спасибо.

Answer 1

Angular использует Крюки жизненного цикла , которые определяют, как и когда компоненты будут отображаться и обновляться:

Компонент имеет жизненный цикл, управляемый Angular.

Angularсоздает его, отображает его, создает и отображает его дочерние элементы, проверяет его при изменении его свойств, связанных с данными, и уничтожает его перед удалением из DOM.

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

Тесная связь означает, что компоненты (не угловые компоненты, а любые части программы или системы) сильно зависят отдруг с другом.В контексте Angular изменение состояния компонента (например, переменных) напрямую влияет на его рендеринг.Таким образом, если вы обращаетесь к элементу DOM напрямую с помощью ElementRef, вы не можете запустить код компонента в веб-приложении (например, использовать многопоточность).