当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > 详解Angular如何正确的操作DOM

详解Angular如何正确的操作DOM

2019年05月28日  | 移动技术网IT编程  | 我要评论

无奈接手了一个旧项目，上一个老哥在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、@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()">测试获取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 {
　 // 通过本地变量获取元素 可通过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一致。

// 复制一个元素
 <div class="tip-test-wrapper">
 <button class="test-get-dom" #testdom (click)="getdomtest()">测试获取dom</button>
 </div>
 <div class="tip-test-wrapper">
 <button class="test-get-dom" #testdom (click)="getdomtest()">测试获取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之后，如何对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.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供使用，如下：

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网