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 = '';
}
}
输出:
相关文章
在 Angular 中上传文件
发布时间:2023/04/14 浏览次数:71 分类:Angular
-
本教程演示了如何在 Angular 中上传任何文件。我们还将介绍如何在文件上传时显示进度条,并在上传完成时显示文件上传完成消息。
Angular 中所有 Mat 图标的列表
发布时间:2023/04/14 浏览次数:91 分类:Angular
-
本教程演示了在哪里可以找到 Angular 中所有 Mat 图标的列表以及如何使用它们。
Angular 2 中的复选框双向数据绑定
发布时间:2023/04/14 浏览次数:139 分类:Angular
-
本教程演示了如何一键标记两个复选框。这篇有 Angular 的文章将着眼于执行复选框双向数据绑定的不同方法。
在 AngularJS 中重新加载页面
发布时间:2023/04/14 浏览次数:142 分类:Angular
-
我们可以借助 windows.location.reload 和 reload 方法在 AngularJS 中重新加载页面。
在 AngularJs 中设置 Select From Typescript 的默认选项值
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程提供了在 AngularJs 中从 TypeScript 中设置 HTML 标记选择的默认选项的解释性解决方案。
在 AngularJS 中启用 HTML5 模式
发布时间:2023/04/14 浏览次数:150 分类:Angular
-
本文讨论如何在 AngularJS 应用程序上启用带有深度链接的 HTML5 模式。
在 AngularJs 中加载 spinner
发布时间:2023/04/14 浏览次数:107 分类:Angular
-
我们将介绍如何在请求加载时添加加载 spinner,并在 AngularJs 中加载数据时停止加载器。
在 Angular 中显示和隐藏
发布时间:2023/04/14 浏览次数:78 分类:Angular
-
本教程演示了 Angular 中的显示和隐藏。在开发商业应用程序时,我们需要根据用户角色或条件隐藏一些数据。我们必须根据该应用程序中的条件显示相同的数据。
在 Angular 中下载文件
发布时间:2023/04/14 浏览次数:104 分类:Angular
-
本教程演示了如何在 angular 中下载文件。我们将介绍如何通过单击按钮在 Angular 中下载文件并显示一个示例。