这篇文章主要介绍“Angular中如何操作DOM元素”,在日常操作中,相信很多人在Angular中如何操作DOM元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angular中如何操作DOM元素”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
在angular获取DOM元素可以使用
javascript的原生API
,或者引入jQuery通过jquery对象
操作DOM,但angular已经给我们提供了相应的API(ElementRef
)来获取DOM元素,就没必要使用原生的API或者jQuery了。【相关教程推荐:《angular教程》】
1、创建TestComponent
组件,模板如下:test.component.html
<div> <p>你好</p> </div> <div> <span>世界</span> </div> <h2>标题</h2> <pass-badge id="component" textColor="red">组件</pass-badge>
2、编写test.component.ts
文件
import { Component, OnInit } from '@angular/core'; // 1、导入 ElementRef 类 import { ElementRef} from '@angular/core'; import { PassBadge } from './compoment/pass-badge/pass-badge.component' @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'], declarations: [ PassBadge ] }) export class TestComponent implements OnInit { // 2、将 ElementRef 类注入 test 组件中 constructor(private el:ElementRef) {} ngOnInit() { // 3、获取 DOM 元素 console.log(this.el.nativeElement) console.log(this.el.nativeElement.querySelector('#component')) } }
我们来看看this.el.nativeElement
是什么
所以就可以通过this.el.nativeElement.querySelector('#component')
来操作对应的DOM元素。例如改变文字颜色就可以
this.el.nativeElement.querySelector('#component').style.color = 'lightblue'
可以通过
ViewChild
获取组件,同样的还有ContentChild
,ViewChildren
和ContentChildren
1、修改TestComponent
组件,为对应元素加上模板变量,如下
<div> <p>你好</p> </div> <!-- 1、给元素加入模板变量 div --> <div #div> <span>世界</span> </div> <h2>标题</h2> <!-- 给组件加入模板变量 component --> <pass-badge #component textColor="red">组件</pass-badge>
2、修改test.component.ts
,如下:
import { Component, OnInit } from '@angular/core'; import { ElementRef} from '@angular/core'; // 2、引入ViewChild import { ViewChild } from '@angular/core' @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { constructor(private el:ElementRef) {} // 3、获取元素 @ViewChild('component') dom: any; @ViewChild('div') div: any; ngOnInit() { console.log(this.dom) // PassBadgeComponent this.dom.fn() // 调用 passbadge 组件的 fn 方法 console.log(this.div) // ElementRef this.div.nativeElement.style.color = 'lightblue' // 文字颜色修改为淡蓝色 } }
最终结果如下
由结果我们可以知道,当使用
ViewChild
模板变量获取组件元素时,获取到的是组件导出的组件类(上例是PassBadgeComponent
),这时候只可以操作组件中含有的属性。当使用
ViewChild
模板变量获取html元素时,获取到的时ElementRef
类型的类,这时可以通过this.div.nativeElement.querySelector('span')
等原生API来操作元素
到此,关于“Angular中如何操作DOM元素”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。