angularでdom要素を取得する方法は何ですか？

1年 ago
夏樹, 風
1 minute

AngularでDOM要素を取得するためにViewChildデコレータを使用することができます。

最初に、コンポーネントのクラスで、ViewChildとElementRefをインポートします。

import { ViewChild, ElementRef } from '@angular/core';

その後、コンポーネントクラスでViewChildプロパティを宣言し、ElementRefクラスの型注釈を使用します。

@ViewChild('myElement', {static: false}) myElement: ElementRef;

テンプレート内で、引用変数を定義するために＃記号を使用し、ViewChildプロパティに渡します。

<div #myElement>这是一个 DOM 元素</div>

次に、コンポーネントクラス内で、myElementプロパティを使用してDOM要素にアクセスできます。実際のDOM要素オブジェクトを取得するにはnativeElementプロパティを使用できます。

ngAfterViewInit() {
  console.log(this.myElement.nativeElement);
}

注意：ViewChild は DOM 要素への参照を取得するので、取得する前にその DOM 要素が描画されていることを確認する必要があります。DOM 要素が描画されていることを確認するには、ngAfterViewInit ライフサイクルフックを使用することができます。

また、DOM要素を取得するためには、ディレクティブを使用する方法もあります。例えば、@ViewChild(MyDirective)のように指定します。ここで、MyDirectiveはカスタムディレクティブです。

bannerAds