web-dev-qa-db-fra.com

Angular 2+: Récupère l'élément enfant de @ViewChild ()

Comment puis-je accéder aux éléments enfants (ici: <img>) De @ViewChild() dans Angular 2+ sans déclaration explicite?

Dans template.html

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

Dans component.ts

@ViewChild('parent') parent;

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

L'objectif est de pouvoir créer un composant universel qui utilise:

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

Les éléments enfants de #parent Doivent donc être accessibles sans déclaration explicite.

angularangular-componentsviewchild
7
btx

Vous pouvez utiliser la propriété nativeElement de ElementRef donnée par ViewChild pour obtenir l'élément HTML correspondant. De là, les méthodes et propriétés DOM standard donnent accès à ses enfants:

  • element.children
  • element.querySelector
  • element.querySelectorAll
  • etc.

Par exemple:

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

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

Voir ce stackblitz pour une démo.

7
ConnorsFan

utilisez ViewChildren à la place pour obtenir tous les éléments avec la même balise.

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

Pour convertir ces éléments en tableau:

const arr = this.parent.toArray();

Choisissez le premier élément:

const el = arr[0]

Accédez au HTML enfant du premier élément: const innerHtml = el.nativeElement.innerHtml;

1
Vugar Abdullayev

Dans votre cas, lorsque vous n'avez besoin que d'un et premier enfant.

this.parent.nativeElement.firstChild

0
Grzegorz S.