在 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>';
輸出:
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn