Angular中如何操作DOM元素

这篇文章主要介绍“Angular中如何操作DOM元素”,在日常操作中,相信很多人在Angular中如何操作DOM元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Angular中如何操作DOM元素”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联从2013年创立,是专业互联网技术服务公司,拥有项目做网站、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元环县做网站,已为上家服务,为环县各地企业和个人服务,联系电话:13518219792

Angular中如何操作DOM元素

在angular获取DOM元素可以使用javascript的原生API,或者引入jQuery通过jquery对象操作DOM,但angular已经给我们提供了相应的API(ElementRef)来获取DOM元素,就没必要使用原生的API或者jQuery了。【相关教程推荐:《angular教程》】

ElementRef 获取DOM元素

1、创建TestComponent组件,模板如下:test.component.html

你好

    世界

标题

组件

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是什么

Angular中如何操作DOM元素
所以就可以通过this.el.nativeElement.querySelector('#component')来操作对应的DOM元素。例如改变文字颜色就可以

this.el.nativeElement.querySelector('#component').style.color = 'lightblue'

模板变量获取DOM元素

可以通过ViewChild获取组件,同样的还有ContentChildViewChildrenContentChildren

1、修改TestComponent组件,为对应元素加上模板变量,如下

    

你好

    世界

标题

组件

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'	// 文字颜色修改为淡蓝色
    }
}

最终结果如下

Angular中如何操作DOM元素

由结果我们可以知道,当使用ViewChild模板变量获取组件元素时,获取到的是组件导出的组件类(上例是PassBadgeComponent),这时候只可以操作组件中含有的属性。

当使用ViewChild模板变量获取html元素时,获取到的时ElementRef类型的类,这时可以通过this.div.nativeElement.querySelector('span')等原生API来操作元素

到此,关于“Angular中如何操作DOM元素”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


标题名称:Angular中如何操作DOM元素
URL网址:http://scyanting.com/article/pisice.html

其他资讯