Получить элемент по метке внутри ионного содержимого

Question

Мне удается получить элемент 'img' на моей странице, но он обнаруживает все изображения, включая изображения внутри заголовка ion.Мне нужно только получить тег 'img' внутри ion-содержимого или div с идентификатором.

Я пытался использовать Angular ViewChild для получения идентификатора div.Он обнаруживает идентификатор, но я не уверен, что делать дальше.

@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

Предполагая, что я правильно понял ваш вопрос, вы хотите найти определенный элемент по тегу, но только внутри определенного элемента div / элемента (того, который вы определили для переменной шаблона # from).

Если вы хотите использовать @ViewChildren, вы можете попробовать что-то вроде этого:

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

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

Оттуда вы можете получить атрибуты этого элемента img без проблем. Хотя имейте в виду, что наличие нескольких тегов img в div даст вам коллекцию с несколькими результатами. Вы должны выяснить, что вы хотите сделать в этом сценарии.

StackBlitz

Answer 2

Вы можете получить доступ к тегу изображения с помощью 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 с помощью этого образца кода