web-dev-qa-db-ja.com

Angular 2+：@ViewChild（）の子要素を取得

明示的な宣言なしで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の子要素は、明示的な宣言なしでアクセス可能である必要があります。

angularangular-componentsviewchild
5
btx

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 をご覧ください。

7
ConnorsFan

同じタグを持つすべての要素を取得する代わりにViewChildrenを使用します。

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

これらの要素を配列に変換するには：

const arr = this.parent.toArray();

最初の要素を選択：

const el = arr[0]

最初の要素の子htmlにアクセスします：const innerHtml = el.nativeElement.innerHtml;

1
Vugar Abdullayev

あなたの場合、最初の子が1人だけ必要なとき。

this.parent.nativeElement.firstChild

0
Grzegorz S.