[Angular] 笔记 22:ElementRef

chatgpt:

ElementRef 是 Angular 中的一个类,它用于包装对 DOM 元素的引用。它允许开发者直接访问与 Angular 组件关联的宿主 DOM 元素。

当在 Angular 中需要直接操作 DOM 元素时,可以使用 ElementRef。通常情况下,最好避免直接操作 DOM,而是使用 Angular 的数据绑定和指令。但在一些特殊情况下,比如集成第三方库或需要直接操纵 DOM 的特定功能中,ElementRef 可能会派上用场。

需要注意的是,直接操作 DOM 可能会破坏 Angular 的变更检测机制,因此在使用 ElementRef 时应该小心谨慎,并确保操作的是被封装在 Angular 生命周期和变更检测机制内的特定元素。

以下是一个简单的示例,展示了在 Angular 中如何使用 ElementRef

import { Component, ElementRef, AfterViewInit } from '@angular/core';@Component({selector: 'app-example',template: '<div #myDiv>Some content</div>',
})
export class ExampleComponent implements AfterViewInit {constructor(private elementRef: ElementRef) {}ngAfterViewInit() {// 使用 ElementRef 获取宿主 DOM 元素const divElement: HTMLElement = this.elementRef.nativeElement.querySelector('#myDiv');// 在这里可以直接操作 DOM 元素divElement.style.color = 'red';}
}

在这个示例中,ElementRef 被注入到了 ExampleComponent 的构造函数中,并在 ngAfterViewInit 生命周期钩子中使用它来获取 #myDiv 的宿主 DOM 元素,并修改了其文字颜色。

使用元素引用(ElementRef)有一些注意事项。

绕过 Angular 的抽象层: 直接操作 DOM 元素可能会绕过 Angular 的变更检测机制,导致应用程序中的一些问题。Angular 的核心优势之一是其数据绑定和变更检测能力,直接操作 DOM 可能会破坏这种优势。

安全风险: 操作原始的 DOM 元素可能存在安全风险。例如,直接操作 DOM 元素可能导致潜在的跨站脚本(XSS)攻击,因此需要谨慎处理用户输入的数据。

跨平台兼容性: 直接访问 DOM 可能会使应用程序的跨平台兼容性降低。Angular 的抽象层使得应用程序更容易在不同的平台和环境中运行,但直接操作 DOM 可能会导致在特定平台上出现问题。

维护困难: 直接的 DOM 操作可能会导致代码变得更难维护。随着应用程序的发展和变化,直接与 DOM 交互的部分可能需要更频繁的更新和维护。

总体来说,虽然 ElementRef 提供了直接访问 DOM 元素的能力,但是在使用它时需要谨慎考虑这些注意事项,尽量避免直接操作 DOM,而是优先使用 Angular 的抽象机制和指令来管理视图。


Angular For Beginners - 26. ElementRef

ElementRef 总是与 @ViewChild 一起使用。

使用 @ViewChild 获取数据。

使用 ElementRef 操纵这些获取的数据是最快速,最简单,同时也是最危险的方式。

在这里插入图片描述

1. 避免在组件上使用 @ViewChild

虽然可以,但如果在组件上使用 @ViewChild,就不会获得所有 javascript 属性。

pokemon-list.component.html: <th> 元素添加 #pokemonTh:

<table><thead><th #pokemonTh>Name</th><th>Index</th></thead><tbody><app-pokemon-detail#pokemonRef*ngFor="let pokemon of pokemons"[detail]="pokemon"(remove)="handleRemove($event)"><h1>-----------------------</h1><h2>============================</h2><h3></h3></app-pokemon-detail></tbody>
</table>

pokemon-list.component.ts:

import {AfterViewInit,Component,ElementRef,OnInit,ViewChild,ViewChildren,
} from '@angular/core';
import { Pokemon } from 'src/app/models/pokemon';
import { PokemonService } from 'src/app/services/pokemon.service';@Component({selector: 'app-pokemon-list',templateUrl: './pokemon-list.component.html',styleUrls: ['./pokemon-list.component.css'],
})
export class PokemonListComponent implements OnInit, AfterViewInit {pokemons: Pokemon[] = [];@ViewChildren('pokemonRef') pokemonRef!: ElementRef;@ViewChild('pokemonTh') pokemonTh!: ElementRef;constructor(private pokemonService: PokemonService) {}// 新代码ngAfterViewInit(): void {console.log('ngAfterViewInit begin');console.log(this.pokemonTh);this.pokemonTh.nativeElement.innerText="Pokemon Name"console.log('ngAfterViewInit end');}handleRemove(event: Pokemon) {this.pokemons = this.pokemons.filter((pokemon: Pokemon) => {return pokemon.id !== event.id;});}ngOnInit(): void {// 填充 pokemons 属性// this.pokemons = this.pokemonService.getPokemons();this.pokemonService.getPokemons().subscribe((data: Pokemon[]) => {console.log(data);this.pokemons = data;});}
}

2. Web 页面

Name 变成了 Pokemon Name, console 里还可以看到除了 innerText 之外的其他属性.

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/310161.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

八皇后问题(C语言)

了解题意 在一个8x8的棋盘上放置8个皇后&#xff0c;使得任何两个皇后都不能处于同一行、同一列或同一斜线上。问有多少种方法可以放置这8个皇后&#xff1f; 解决这个问题的目标是找到所有符合要求的皇后摆放方式&#xff0c;通常使用回溯算法来求解。回溯算法会尝试所有可能…

56.网游逆向分析与插件开发-游戏增加自动化助手接口-通过UI分析自动药水设定功能

内容来源于&#xff1a;易道云信息技术研究院VIP课 上一节内容&#xff1a;自动药水设定功能的逆向分析-CSDN博客 这次是假设没有之前的思路积累的话&#xff0c;怎样去找按钮事件。 通过ui当做切入点去做&#xff0c;就是一个窗口它显示不显示&#xff0c;游戏怎样控制这个…

STL——集合算法

算法简介&#xff1a; set_intersection // 求两个容器的交集set_union // 求两个容器的并集set_difference // 求两个容器的差集 1.set_intersection 函数原型&#xff1a; set_intersection(iterator beg1, iterator end1, iterator beg2, iterator end2, iterator dest);…

史上最好用的SSH工具,好用到超出你的想象

给大家推荐一个功能强大&#xff0c;跨平台切风格很现代化的SSH管理工具——Xterminal。 1、功能特点 布局自由 命令管理 酷炫皮肤 在线编辑 文件上传方式多样 本地融合显示 支持rzsz 文件断点上传 服务器监控 2、来吧&#xff0c;展示 布局自由 双击修改标题 自…

.FileZilla的使用和主动模式被动模式介绍

FileZilla的使用和主动模式被动模式介绍 1.FileZilla的使用和主动模式被动模式介绍1.安装下载2.新建组和用户2.1打开后出现如下界面2.2点击编辑打开组这个选项2.3点击添加组以后&#xff0c;点击确认2.4输入组的名称&#xff0c;列如我输入的niyin2.5点击用户选项2.6像上面一样…

【owt-server】一些构建项目梳理

【owt-server】清理日志&#xff1a;owt、srs、ffmpeg 【owt】p2p client mfc 工程梳理【m98】webrtc vs2017构建带符号的debug库【OWT】梳理构建的webrtc和owt mfc工程 m79的mfc客户端及owt-client

K8S容器的一则故障记录

一、故障现象 XXX反馈说某某业务服务异常&#xff0c;无法启动&#xff0c;需要进行协助排查。经常会接到这样一个需求&#xff0c;一开始无法清楚知道具体什么问题&#xff0c;需要跟一线运维人员详细做沟通&#xff0c;了解故障问题的细节。 根据一线运维人员的反馈&#xff…

git基础概念和常用命令(日常开发收藏备用)

目录 ### 常用命令 ### 远程仓库与克隆 ### 分支管理 ### 子模块&#xff08;Submodule&#xff09; ### 其他高级操作 ### 交互式暂存&#xff08;Interactive Staging&#xff09; ### cherry-pick ### rebase ### reflog与reset ### 子树合并&#xff08;Subtree …

Spring Data Redis对象缓存序列化问题

相信在项目中&#xff0c;你一定是经常使用 Redis &#xff0c;那么&#xff0c;你是怎么使用的呢&#xff1f;在使用时&#xff0c;有没有遇到同我一样&#xff0c;对象缓存序列化问题的呢&#xff1f;那么&#xff0c;你又是如何解决的呢&#xff1f; Redis 使用示例 添加依…

IntelliJ IDEA常用快捷键

【1】创建内容&#xff08;新建&#xff09;&#xff1a;altinsert 【2】main方法&#xff1a;psvm 【3】输出语句&#xff1a;sout 【4】复制行&#xff1a;ctrld 【5】删除行&#xff1a;ctrly&#xff08;很多编辑器ctrly是前进操作&#xff0c;如果选择 Delete Line&…

40道MyBatis面试题带答案(很全)

1. 什么是MyBatis &#xff08;1&#xff09;Mybatis是一个半ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;它内部封装了JDBC&#xff0c;开发时只需要关注SQL语句本身&#xff0c;不需要花费精力去处理加载驱动、创建连接、创建statement等繁杂的过程。程序员直接…

C++编程中级阶段

目录 1.模版 1.1函数模版 1.1.1函数模版语法 1.1.2函数模版注意事项 1.1.3函数模版案例 1.1.4普通函数与函数模板的区别 1.1.5普通函数与函数模板的调用规则 1.1.6模版的局限性 1.2类模版 2.STL处识 3.STL常用容器 3.1string容器 3.2vector容器 3.3deque容器 3.…