>웹 프론트엔드 >JS 튜토리얼 >Angular에서 DOM 요소를 작동하는 방법에 대해 설명하는 기사

Angular에서 DOM 요소를 작동하는 방법에 대해 설명하는 기사

青灯夜游
青灯夜游앞으로
2022-01-06 18:58:252538검색

Angular中怎么操作DOM元素?下面本篇文章给大家介绍一下angular操作DOM元素的方法,希望对大家有所帮助!

Angular에서 DOM 요소를 작동하는 방법에 대해 설명하는 기사

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

ElementRef 获取DOM元素

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

<div>
	<p>你好</p>
</div>
<div>
    <span>世界</span>
</div>
<h1>标题</h1>
<pass-badge id="component" textColor="red">组件</pass-badge>

2、编写test.component.ts文件

import { Component, OnInit } from &#39;@angular/core&#39;;
// 1、导入 ElementRef 类
import { ElementRef} from &#39;@angular/core&#39;;
import { PassBadge } from &#39;./compoment/pass-badge/pass-badge.component&#39;

@Component({
  selector: &#39;app-test&#39;,
  templateUrl: &#39;./test.component.html&#39;,
  styleUrls: [&#39;./test.component.css&#39;],
  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(&#39;#component&#39;))
    }
}

我们来看看this.el.nativeElement是什么

Angular에서 DOM 요소를 작동하는 방법에 대해 설명하는 기사
所以就可以通过this.el.nativeElement.querySelector('#component')来操作对应的DOM元素。例如改变文字颜色就可以

this.el.nativeElement.querySelector(&#39;#component&#39;).style.color = &#39;lightblue&#39;

模板变量获取DOM元素

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

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

<div>
    <p>你好</p>
</div>
<!-- 1、给元素加入模板变量 div -->
<div #div>
    <span>世界</span>
</div>
<h1>标题</h1>
<!-- 给组件加入模板变量 component -->
<pass-badge #component textColor="red">组件</pass-badge>

2、修改test.component.ts,如下:

import { Component, OnInit } from &#39;@angular/core&#39;;
import { ElementRef} from &#39;@angular/core&#39;;
// 2、引入ViewChild
import { ViewChild } from &#39;@angular/core&#39;

@Component({
  selector: &#39;app-test&#39;,
  templateUrl: &#39;./test.component.html&#39;,
  styleUrls: [&#39;./test.component.css&#39;]
})
export class TestComponent implements OnInit {
    constructor(private el:ElementRef) {}
    // 3、获取元素
    @ViewChild(&#39;component&#39;) dom: any;
    @ViewChild(&#39;div&#39;) div: any;
    ngOnInit() {
        console.log(this.dom)	// PassBadgeComponent
        this.dom.fn()   // 调用 passbadge 组件的 fn 方法
        console.log(this.div)	// ElementRef
        this.div.nativeElement.style.color = &#39;lightblue&#39;	// 文字颜色修改为淡蓝色
    }
}

最终结果如下

Angular에서 DOM 요소를 작동하는 방법에 대해 설명하는 기사

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

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

更多编程相关知识,请访问:编程视频!!

위 내용은 Angular에서 DOM 요소를 작동하는 방법에 대해 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제