在 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 檔案中的@angular/core 匯入 ViewChild、ElementRef 以及 Component 和 AfterViewInit。

在我們將它們匯入到我們的類之後，在 constructor 中建立一個私有 ElByClassName 和一個 ngAfterViewInit 函式，該函式將使用 <HTMLElement> 通過類名儲存我們獲得的元素。

一旦我們有了我們想要的元素，我們現在可以使用 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>';

輸出：