快捷導(dǎo)航

詳解Angular如何正確的操作DOM

更新時(shí)間：2018年07月06日 15:05:01 作者：Shapeying

這篇文章主要介紹了詳解Angular如何正確的操作DOM，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

無(wú)奈接手了一個(gè)舊項(xiàng)目，上一個(gè)老哥在Angular項(xiàng)目中大量使用了JQuery來(lái)操作DOM，真的是太不講究了。那么如何優(yōu)雅的使用Angular的方式來(lái)操作DOM呢？

獲取元素

1、ElementRef --- A wrapper around a native element inside of a View.

在組件的 constructor中注入ElementRef，可以獲取到整個(gè)組件元素的包裹。

@Component({
 selector: 'app-test-page',
 templateUrl: './test-page.component.html',
 styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

 constructor(
 private el: ElementRef
 ) { }

 ngOnInit() {
 }

 getDomTest() {
 console.dir(this.el);
 }
｝

ElementRef中的nativeElement即是組件最外層的DOM元素。再通過(guò)原生的DOM定位方式，即可獲取到指定的selector元素。

getDomTest() {
 console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // 獲取指定的子元素
 }

2、@viewChild() --- You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

@viewChild可以獲取指定的元素，指定的方式可以是本地變量或者組件類型；

// HTML
<div class="tip-test-wrapper">
　　　// 本地變量綁定button按鈕
 <button class="test-get-dom" #testdom (click)="getDomTest()">測(cè)試獲取DOM</button>
 </div>
　　// Dialog組件
<app-dialog></app-dialog>


// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';


@Component({
 selector: 'app-test-page',
 templateUrl: './test-page.component.html',
 styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {
　 // 通過(guò)本地變量獲取元素 可通過(guò)read來(lái)指定獲取的元素類型
 @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
 @ViewChild('testdom') viewelement: ElementRef;

　 // 通過(guò)組件類型來(lái)獲取
 @ViewChild(DialogComponent) viewcontent: DialogComponent;

 constructor(
 private el: ElementRef
 ) { }

 ngOnInit() {
 }

 getDomTest() {
 // console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
 console.dir(this.viewcontainer);
 console.dir(this.viewelement);
 console.dir(this.viewcontent);
 }
}

備注：ElementRef或者 @viewChild 獲取元素，一定要在 ngAfterViewInit 周期之后再使用。

3、@viewChildren -- You can use ViewChildren to get the {@link QueryList} of elements or directives from theview DOM.

@viewChild會(huì)返回符合條件的第一個(gè)元素，如果需要獲取多個(gè)符合條件的元素呢？ @viewChildren會(huì)返回所有符合條件的元素的list。指定selector的方式與@viewChild一致。

// 復(fù)制一個(gè)元素
 <div class="tip-test-wrapper">
 <button class="test-get-dom" #testdom (click)="getDomTest()">測(cè)試獲取DOM</button>
 </div>
 <div class="tip-test-wrapper">
 <button class="test-get-dom" #testdom (click)="getDomTest()">測(cè)試獲取DOM</button>
 </div>
</div>
<app-dialog></app-dialog>
<app-dialog></app-dialog>

// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';


@Component({
 selector: 'app-test-page',
 templateUrl: './test-page.component.html',
 styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

 @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
 @ViewChild('testdom') viewelement: ElementRef;
 @ViewChildren('testdom') viewelements: QueryList<any>;
 @ViewChild(DialogComponent) viewcontent: DialogComponent;
 @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

 constructor(
 private el: ElementRef
 ) { }

 ngOnInit() {
 }

 getDomTest() {
 // console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
 // console.dir(this.viewcontainer);
 console.dir(this.viewelement);
 console.dir(this.viewelements);
 console.dir(this.viewcontent);
 console.dir(this.viewcontents);
 }

操作DOM --- Renderer2

在獲取dom之后，如何對(duì)dom進(jìn)行操作呢？原生的domAPI是一種選擇，但是Angular提供了更好的跨平臺(tái)方式 Renderer2。

引入 Renderer2 , 然后在construct中注入。

import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild, Renderer2 , ViewChildren, QueryList} from '@angular/core';

import { DialogComponent } from './../../common/components/dialog/dialog.component';


@Component({
 selector: 'app-test-page',
 templateUrl: './test-page.component.html',
 styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

 @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
 @ViewChild('testdom') viewelement: ElementRef;
 @ViewChildren('testdom') viewelements: QueryList<any>;
 @ViewChild(DialogComponent) viewcontent: DialogComponent;
 @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

 constructor(
 private render: Renderer2,
 private el: ElementRef
 ) { }

 ngOnInit() {
 }

 getDomTest() {
 // 修改元素顏色
 this.render.setStyle(this.viewelement.nativeElement , 'color' , 'red');
 }
｝

renderer2提供了豐富的API供使用，如下：

總結(jié)

通過(guò)elementRef或者@viewChild @viewChildren獲取元素，再通過(guò)renderer2提供的API來(lái)操作元素。不過(guò)記得在不要在 ngAfterViewInit 周期之前使用。通過(guò)Angular提供的方式，可以滿足大部分的操作DOM的需求了。如果有特殊的場(chǎng)景，當(dāng)然還是原生DOM擼起來(lái)呀

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: