详解Angular如何正确的操作DOM


Posted in Javascript onJuly 06, 2018

无奈接手了一个旧项目,上一个老哥在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);
 }
}

详解Angular如何正确的操作DOM

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

详解Angular如何正确的操作DOM

备注: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);
 }

详解Angular如何正确的操作DOM

操作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供使用,如下:

详解Angular如何正确的操作DOM

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 #Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 #Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 #Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
vue.js动画中的js钩子函数的实现
Jul 06 #Javascript
老生常谈JS中的继承及实现代码
Jul 06 #Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 #Javascript
You might like
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
浅谈React高阶组件
2018/03/28 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
基于keras中的回调函数用法说明
2020/06/17 Python
Python pip使用超时问题解决方案
2020/08/03 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
Django视图类型总结
2021/02/17 Python
新媒传信软件测试面试题
2013/02/24 面试题
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
航海技术专业毕业生求职信
2014/04/06 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript