访问元素的内联样式属性并在Angular 9中覆盖它

Question

我的Angular 9项目中有来自第三方lib的HTML DOM元素。 它具有内联样式属性，例如

 <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)';

注意：不建议在Angular中使用本机JavaScript API（window，document，navigator等），因为该代码应该与平台无关（它应该能够在浏览器以及具有Node.js的服务器上运行）