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

我如何在没有显式声明的情况下访问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的子元素。

最佳答案

您可以使用nativeElement给出的ElementRef的ViewChild属性来获取相应的HTML元素。从那里，标准的DOM方法和属性可以访问其子级:

element.children

element.querySelector

element.querySelectorAll

等。

例如:

@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。

关于Angular 2+ : Get child element of @ViewChild()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51828448/