Javascript 在图形中访问DOM中的共享组件元素

共享组件：pro图像

此组件具有id为proImg的图像元素

<img id="proImg" src="{{imgPath}}">

imgPath是@input变量

此组件用于多个组件中，每个父级将图像路径和图像维度传递给上述共享组件

在这个shared component.ts文件中，我试图按id访问

元素，以向元素添加一些属性。但是，虽然按Id访问元素，但只访问最后一个元素

---

每次在类似于主机选择器的其他组件中使用该图像元素时，我都要对其进行唯一化。请建议我如何实现。

您的问题是它们都具有相同的

id

属性<代码>id应该是唯一的，根据Mozilla文档中的

getElementById

一个选项是，不要使用

id

，而是使用

ViewChild

来访问DOM元素

将模板更改为此

在您的组件中，您可以通过以下方式访问它：

class MyCmponent{
@ViewChild（'proImg'，{static:true}）proImg:ElementRef；
ngAfterViewInit（）{
//您可以如下方式访问本机dom元素：
this.proImg.nativeElement.style.height=“100px”；
this.proImg.nativeElement.style.width=“100px”；
}
}

---

另一个选项是，如果只是设置样式或其他特性，则可以在模板中绑定它们

组成部分

类MyComponent{
样式={
宽度：“100px”，
高度：“200px
}
classes=['class1'，'另一个类']

更多关于ngStyle的信息

更多关于ngClass的信息