Получите доступ к свойству встроенного стиля элемента и перезапишите его в Angular 9

Question

В моем проекте Angular 9 есть элемент HTML DOM, поступающий из сторонней библиотеки lib. У него есть встроенные свойства стиля, такие как

 <div class ="extLib" style ="transform: scale(1, 1);"></div>

Я пытался получить к нему доступ из компонента

 const svgContainer = (document.querySelector('.viewer-screens-base-scrContainer-api') as 
   HTMLElement).style.transform = 'scale(0.9, 0.9)';

Однако я не могу перезаписать его свойства стиля.

Пожалуйста, предложите мне правильный способ сделать это.

Answer 1

Вы должны добавить ссылку на шаблон:

<div #myReference class ="extLib" style ="transform: scale(1, 1);"></div>

И затем в TypeScript:

ViewChild('myReference') myReference: ElementRef;

Наконец, в соответствующей части вашего кода:

(this.myReference.nativeElement as HTMLDivElement).style.transform = 'scale(0.9, 0.9)';

Примечание: не рекомендуется использовать собственный JavaScript API в Angular (window, document, navigator, et c ...), поскольку предполагается, что код платформа agnosti c (она должна работать как в браузере, так и на сервере с Node.js)