Question

我设法在页面内获取'img'元素，但它检测到所有图像，包括离子头内的图像。我只需要在离子含量或具有ID的div内获取“ img”标签即可。

我尝试使用Angular ViewChild来获取div的ID。它会检测到ID，但我不确定下一步如何进行。

@ViewChild('newscontainer') newscont;

var imgs = document.getElementsByTagName('img');

for(var i=0; i<imgs.length; i++) {

  imgs[i].onclick = function(img) {
    console.log(img.srcElement.currentSrc)
  }
}

这是HTML

<div #newscontainer padding>
<img src="..." />
</div>

#newscontainer中的内容是从wordpress网站解析的。

Answer 1

您可以使用onclick（$ event）访问图像标签，此事件参数中有关被单击的div的所有信息，您都可以从ts文件访问并采取行动

<div #newscontainer padding>
 <img id="imgTag" (click)="imgClick($event)" src="..." />
</div>

ts文件

imgClick(event){
  console.log(event.target.imgTag);
}

关于div事件变量的所有信息。您可以使用此代码示例访问img

Answer 2

假设我正确理解了您的问题，您想按标签查找特定元素，但只能在特定的div / element（您从中定义模板变量#的div / element中）中找到。

如果您想使用@ViewChildren，可以尝试执行以下操作：

@ViewChild('newscontainer') newscont: ElementRef;
imgElmt: HTMLCollection;

ngAfterViewInit(){
 this.imgElmt = this.newscont.nativeElement.getElementsByTagName('img');
 console.log(this.imgElmt);
}

从那里您可以毫无问题地获取img元素的属性。尽管要记住，div中有多个img标签会为您提供具有多个结果的集合。您应该弄清楚在这种情况下要做什么。

StackBlitz

通过离子含量内的标签获取元素

2 个答案: