通过离子内容中的标签获取元素

Question

我设法在我的页面中获取 'img' 的元素，但它检测到所有图像，包括 ion-header 中的图像。我只需要获取 ion-content 中的 'img' 标签或带 ID 的 div。

我尝试使用 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 中（你从中定义模板变量 # 的元素）。

如果您想使用 @ViewChildren，您可以尝试这样的操作：

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

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

从那里您可以毫无问题地获取该 img 元素的属性。但请记住，在 div 中有多个 img 标签会给你一个包含多个结果的集合。你应该弄清楚在这种情况下你想做什么。

StackBlitz

通过离子内容中的标签获取元素

Get Element by Tag inside ion-content

ionic-framework

ionic3

angular