typescript - Angular 2+: Hämta barn-element av @ViewChild()

Hur kan jag få åtkomst till barnelementen (här: <img>) av @ViewChild() i Angular 2+ utan uttrycklig deklaration?

I template.html

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

I component.ts

@ViewChild('parent') parent;

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

Målet är att kunna skapa en universell komponent som använder:

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

Så barnen till #parent behöver vara tillgängliga utan uttrycklig deklaration.

Svar #1

Du kan använda nativeElement-egenskapen hos ElementRef som ges av ViewChild för att få motsvarande HTML-element. Därifrån ger standard DOM-metoder och egenskaper åtkomst till dess barn:

  • element.children
  • element.querySelector
  • element.querySelectorAll
  • osv.

Till exempel:

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

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

Se denna stackblitz för en demo.

Relaterade artiklar