Angular のクラス名による要素の検索

ElementRef と、それを使用して Angular でクラス名で要素を検索する方法を紹介します。

Angular で ElementRef を使用して名前でクラスを検索する

ElementRef は、nativeElement プロパティを含むネイティブ DOM 要素オブジェクトラッパーです。DOM 要素への参照を保持し、それを使用して DOM を操作します。

ViewChild とともに使用して、コンポーネントクラスから HTML 要素を取得します。ElementRef オブジェクトの使用を理解するための例を見てみましょう。

次のコマンドを使用して、Angular で新しいアプリケーションを作成します。

# angular
ng new my-app

アプリケーションを作成したら、このコマンドを使用してアプリのディレクトリに移動します。

# angular
cd my-app

アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

まず、app.component.ts ファイルの@ angle / core から ViewChild、ElementRef と Component、および AfterViewInit をインポートする必要があります。

それらをクラスにインポートした後、コンストラクターにプライベート ElByClassName を作成し、<HTMLElement> を使用してクラス名で取得した要素を保存する ngAfterViewInit 関数を作成します。

必要な要素ができたら、innerHTML を使用してボタンの名前を変更できます。app.component.ts のコードは次のようになります。

# angular
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular';
constructor(private ElByClassName: ElementRef) {}
ngAfterViewInit() {
const btnElement = (<HTMLElement>this.ElByClassName.nativeElement).querySelector(
'.myButton'
);
btnElement.innerHTML = 'This is Button';
}
}

app.component.html にクラス myButton のボタンテンプレートを作成する必要があります。

# angular
<button class="myButton">My Button</button>

出力：

これらの簡単な手順を使用して、ElementRef を使用して任意の DOM 要素を操作できます。

ボタンの名前を変更するだけでなく、要素を置き換えたい場合は、outerHTML を使用できます。

ngAfterViewInit() で、次のコードを記述して、ボタンを見出しに置き換えます。

# Angular
btnElement.outerHTML = '<h1>This is Heading</h1>';

出力：