Angular 中的 getElementById 替代
我们将介绍 Angular 中 getElementById
函数的替代。
我们还将在 Angular 中引入 ElementRef
函数以从输入中获取文档的元素引用和值。
Angular 中的 getElementById
替代
getElementById
方法返回具有指定值的 ID 属性的元素。这种方法在 HTML DOM
中最常见,几乎每次我们操作、获取信息或文档中的元素时都会用到。
因为 getElementById
是 vanilla Javascript
函数并且我们在 Angular 中使用 Typescript
,所以 Typescript
中这个函数的替代是 ElementRef
,我们将在本教程中介绍。
Angular 中的 ElementRef
ElementRef
是一个类,它可以包裹指定的 DOM 元素以增强本机元素的方法和属性。如果我们将元素定义为 ElementRef
,我们可以将其作为 nativeElement
对象访问。
本文与 Angular 4 到 Angular 12 兼容。
让我们在带有@ViewChild
装饰器的类中使用 ElementRef Interface
来获取元素引用。
首先,我们将编辑我们的 app.component.html
模板并向其中添加以下代码。
# angular
<div #myNameElem></div>
<button (click)="getValue()">Get Value</button>
输出:
在 app.component.ts
文件中,我们将添加以下内容。
#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
@ViewChild("myNameElem") myNameElem: ElementRef;
getValue() {
console.log(this.myNameElem);
this.myNameElem.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
}
}
输出:
在 Angular 中使用 ElementRef
从输入中获取值
现在我们将介绍如何在 Angular 中使用 ElementRef
获取输入的值。
首先,我们将编辑我们的 app.component.html
模板并向其中添加以下代码。
# angular
<input type="text" name="name" #myNameElem />
<button (click)="getValue()">Get Value</button>
<button (click)="resetValue()">Reset</button>
输出:
现在,在 app.component.ts
文件中,我们将添加以下内容:
#angular
import { Component, VERSION, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;
@ViewChild('myNameElem') myNameElem: ElementRef;
getValue() {
console.log(this.myNameElem.nativeElement.value);
}
resetValue() {
this.myNameElem.nativeElement.value = '';
}
}
输出:
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