一文聊聊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 '@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'
      

模闆變量擷取DOM元素

可以通過

ViewChild

擷取元件，同樣的還有

ContentChild

，

ViewChildren

和

ContentChildren

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 '@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來操作元素

更多程式設計相關知識，請通路：程式設計視訊！！