Angular 2+：获取@ViewChild（）的子元素

Question

如何在Angular 2+中访问<img>的子元素（在这里：@ViewChild()）而无需显式声明？

在template.html

中

<div #parent>
  <!-- There can be anything than <img> -->
  <img src="http://localhost/123.jpg" alt="">
</div>

在component.ts中

@ViewChild('parent') parent;

public getFirstChild() {
   this.firstChild = this.parent.? //
}

目标是能够创建使用以下内容的通用组件：

<div #parent>
    <ng-content></ng-content>
</div>

因此#parent的子元素需要在没有显式声明的情况下可以访问。

Answer 1

您可以使用nativeElement给定的ElementRef的{​​{1}}属性来获取相应的HTML元素。从那里，标准的DOM方法和属性可以访问其子级：

• element.children
• element.querySelector
• element.querySelectorAll
• 等

例如：

ViewChild

有关演示，请参见this stackblitz。

Answer 2

改为使用ViewChildren来获取所有具有相同标签的元素。

@ViewChildren('parent') parents: QueryList<any>;

要将这些元素转换为数组：

const arr = this.parent.toArray();

选择第一个元素：

const el = arr[0]

访问第一个元素的子html： const innerHtml = el.nativeElement.innerHtml;

Answer 3

在您的情况下，只需要一个孩子和第一个孩子。

  

this.parent.nativeElement.firstChild

Answer 4

HTML

<div #parent>
  <span id="child">
</div>

TS

 @ViewChild('parent',{static:false}) parentDiv:ElementRef
 this.parentDiv.nativeElement.firstChild

您可以检查其中是否要进行任何操作renderer2