Angular 2+：获取@ViewChild()的子元素

Question

如何在没有显式声明的情况下访问 Angular 2+ 中 @ViewChild() 的子元素（此处：<img>）？

在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

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

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

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

const arr = this.parent.toArray();

选择第一个元素：

const el = arr[0]

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

Answer 2

可以使用ViewChild给出的ElementRef的nativeElement属性得到对应的HTML元素。从那里，标准 DOM 方法和属性可以访问其子项：

element.children
element.querySelector
element.querySelector全部
等等

例如：

@ViewChild("parent") private parentRef: ElementRef<HTMLElement>;

public getChildren() {
  const parentElement = this.parentRef.nativeElement;
  const firstChild = parentElement.children[0];
  const firstImage = parentElement.querySelector("img");
  ...
}

有关演示，请参阅 this stackblitz。

Answer 3

在你的情况下，当你只需要一个和第一个时 child。

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

Angular 2+：获取@ViewChild()的子元素

Angular 2+: Get child element of @ViewChild()

angular

typescript

angular-components

viewchild