AngularにおけるElementRefの使い方

875 ワード

シーンの使用:VレイヤDOMをCレイヤで直接操作する
Angularは、プラットフォーム間、Web、モバイル、デスクトップアプリケーションをサポートし、ElementRefを使用することで、異なるプラットフォームの下のビューレイヤのnative要素(ブラウザ環境では、native要素は通常DOM要素を指す)を操作することができ、最後にAngularが提供する強力な依存注入特性によって、native要素に簡単にアクセスすることができます.
1、ElementRef API
class ElementRef {
  constructor(nativeElement: T)
  nativeElement: T
}

2、使用過程
1)テンプレートにアクションが必要なdom要素をマークする
リストページに る

2)C層にElementRefクラスを導入(使用時にwebstormが自動的に導入)3)C層はElementRef変数を宣言し、@ViewChild装飾器を使用してその属性をV層のタグに関連付ける
/*  ViewChild C    V            */
  @ViewChild('linkToIndex', {static: true})
  linkToIndex: ElementRef;

4)V層のDOM元素を操作する
const a = this.linkToIndex.nativeElement as HTMLAnchorElement;
a.click();