在 Angular 中使用 TypeScript 的 getElementById 替换

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

在 Angular 中使用 TypeScript 的 getElementById 替换

作者：迹忆客最近更新：2023/04/14 浏览次数：

本教程指南提供了使用 TypeScript 在 Angular 中替换 document.getElementById 的简要说明。

这还通过代码示例提供了用于在 Angular 中 getElementById 的最佳方法。我们还将了解 TypeScript 中 DOM querySelector 的用途。

首先，让我们了解一下 TypeScript 中的 document.getElementById 方法以及它在开发人员社区中流行的原因。

TypeScript 中的 `document.getElementById()` 方法

document.getElementById() 是一个预定义的 JavaScript（以及 TypeScript）方法，可用于操作 document 对象。它返回一个具有指定值的元素，如果该元素不存在，则返回 null。

document.getElementById() 是开发人员社区中用于 HTML DOM 的最常见和流行的方法之一。

要记住的一个重要点是，如果两个或多个元素具有相同的 id，document.getElementById() 将返回第一个元素。

现在，让我们看一些编码示例，以更好地了解它们的目的和用法。

考虑带有一些具有唯一 demo id 的文本的 h1 标签。现在，在 scripts 部分中，如果我们想要针对特定标签，我们使用 document 对象中可用的 getElementById() 方法。

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">The Document Object</h1>
<h2>The getElementById() Method</h2>
<script>
    document.getElementById("demo").style.color = "red";
</script>

</body>
</html>

输出：

使用 getElementById 定位标签的输出

现在让我们考虑一个更动态的例子：一个输入字段接受一个数字并返回它的立方值。

<!DOCTYPE html>
<html>
<body>

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input type="button" value="cube" onclick="getcube()"/>
</form>

<script>
    function getcube(){
        var number=document.getElementById("number").value;
        alert(number*number*number);
    }
</script>

</body>
</html>

输出：

使用 getElementById 获取数字的输出

现在，让我们看看使用 TypeScript 在 Angular 中的 getElementById 替换。

在 Angular 中使用 TypeScript 使用 `ElementRef` 作为 `getElementById` 替换

AngularJs 的 ElementRef 是 HTML 元素的包装器，包含属性 nativeElement 并保存对底层 DOM 对象的引用。使用 ElementRef，我们可以使用 TypeScript 在 AngularJs 中操作 DOM。

通过使用 ViewChild，我们可以在组件类中获取 HTML 元素的 ElementRef。Angular 允许在构造函数中请求组件的指令元素时注入 ElementRef。

使用 @ViewChild 装饰器，我们使用类中的 ElementRef 接口来获取元素引用。

考虑以下 main.component.html 文件中 AngularJs 中的代码示例。我们有一个带有事件的按钮和一个具有唯一 ID myName 的 div：

# angular

<div #myName></div>

<button (click)="getData()">Get Value</button>

输出：

获取值的 HTML 按钮

示例 1（app.component.ts）：

#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "./main.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    name = "Angular " + VERSION.major;
    @ViewChild("myName") myName: ElementRef;
    getData() {
        console.log(this.myName);
        this.myName.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
    }
}

输出：

输出使用 ElementRef 获取输入的引用

使用 @ViewChild 装饰器，我们在类中的 ElementRef 接口的帮助下获取输入的引用。然后，我们使用带有此引用的 getData() 函数更改其值。

示例 2（app.component.ts）：

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
    name = "Angular";

    @ViewChild("ipt", { static: true }) input: ElementRef;

    ngAfterViewInit() {
        console.log(this.input.nativeElement.value);
    }

    onClick() {
        this.input.nativeElement.value = "test!";
    }
}

输出：

使用 ElementRef 输出以获取输入和更改文本的引用

这将获取输入字段的引用并在单击按钮时更改其内部文本。

上一篇：在 Angular 中使用 ngSwitch

下一篇：在 Angular 中拖放

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享