详解Angular如何正确的操作DOM

详解Angular如何正确的操作DOM

无奈接手了一个旧项目，上一个老哥在Angular项目中大量使用了jquery来操作DOM，真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢？

获取元素

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

在组件的 constructor中注入ElementRef，可以获取到整个组件元素的包裹。

@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元素。再通过原生的DOM定位方式，即可获取到指定的selector元素。

getDomTest() {

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

}

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

@viewChild可以获取指定的元素， 指定的方式可以是本地变量或者组件类型；

// HTML

　　　// 本地变量绑定button按钮

测试获取DOM

　　// 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 {

　 // 通过本地变量获取元素 可通过read来指定获取的元素类型

@ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;

@ViewChild('testdom') viewelement: ElementRef;

　 // 通过组件类型来获取

@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会返回符合条件的第一个元素，如果需要获取多个符合条件的元素呢？ @viewChildren会返回所有符合条件的元素的list。 指定selector的方式与@viewChild一致。

// 复制一个元素

测试获取DOM

测试获取DOM

// 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;

@ViewChild(DialogComponent) viewcontent: DialogComponent;

@ViewChildren(DialogComponent) viewcontents: QueryList;

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);

}

操wXGMqFEoK作DOM  --- Renderer2

在获取dom之后，如何对dom进行操作呢？原生的domAPI是一种选择，但是Angular提供了更好的跨平台方式   Renderer2。

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

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

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

@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;

@ViewChild(DialogComponent) viewcontent: DialogComponent;

@ViewChildren(DialogComponent) viewcontents: QueryList;

constructor(

private render: Renderer2,

private el: ElementRef

) { }

ngOnInit() {

}

getDomTest() {

// 修改元素颜色

this.render.setStyle(this.viewelement.nativeElement , 'color' , 'red');

}

｝

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

总结

通过elementRef或者@viewChild @viewChildren获取元素，再通过renderer2提供的API来操作元素。不过记得在不要在 ngAfterViewInit 周期之前使用。通过Angular提供的方式，可以满足大部分的操作DOM的需求了。如果有特殊的场景，当然还是原生DOM撸起来呀

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。