AngularにおけるElementRefの使い方
875 ワード
シーンの使用:VレイヤDOMをCレイヤで直接操作する
Angularは、プラットフォーム間、Web、モバイル、デスクトップアプリケーションをサポートし、ElementRefを使用することで、異なるプラットフォームの下のビューレイヤのnative要素(ブラウザ環境では、native要素は通常DOM要素を指す)を操作することができ、最後にAngularが提供する強力な依存注入特性によって、native要素に簡単にアクセスすることができます.
1、ElementRef API
2、使用過程
1)テンプレートにアクションが必要なdom要素をマークする
2)C層にElementRefクラスを導入(使用時にwebstormが自動的に導入)3)C層はElementRef変数を宣言し、@ViewChild装飾器を使用してその属性をV層のタグに関連付ける
4)V層のDOM元素を操作する
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();