Angular2学习教程之组件中的DOM操作详解


Posted in Javascript onMay 28, 2017

前言

有时不得不面对一些需要在组件中直接操作DOM的情况,如我们的组件中存在大量的CheckBox,我们想获取到被选中的CheckBox,然而这些CheckBox是通过循环产生的,我们无法给每一个CheckBox指定一个ID,这个时候可以通过操作DOM来实现。angular API中包含有viewChild,contentChild等修饰符,这些修饰符可以返回模板中的DOM元素。

指令中的DOM操作

@Directive({
 selector: 'p'
})
export class TodoDirective{
 constructor(el: ElementRef, renderer: Renderer){
  renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'red');
 }
}

以上声明了一个指令,使用是需要在module中的declarations中声明。该指令的作用是将p元素的backgroundColor设置为red。

-ElementRef是一个允许直接获取DOM元素的一个类,该类包含一个nativeElement属性。当不允许直接操作原生DOM元素时,该属性值为null。

-Renderer该类包含大量可以用来操作DOM原生的方法。

@ViewChild和@ViewChildren

每一个组件都有一个视图模板,通过 template或templateUrl引入。想要获取视图模板中的DOM元素则可以使用@ViewChild和@ViewChildren修饰符。他们可以接受模板变量或元素标签或模板类名来获取DOM节点。@ViewChild返回ElementRef类引用(获取组件时则直接使用组件类名),而@ViewChildren返回QueryList<ElementRef>

//模板内容
<p *ngFor='let item of todos' #name>{{ item.name }}</p>

//组件中获取DOM
@ViewChildren('name')
todoNames: QueryList<ElementRef>;

@ViewChild('name')
todoName: ElementRef;
ngAfterViewInit(){
 this.todoNames.forEach(e=>console.log(e.nativeElement.innerText));
 console.log(this.todoName.nativeElement.innerText);
}

@ViewChild('name')和@ViewChildren('name')通过name模板变量获取p标签DOM节点,可以在ngAfterViewInit声明周期钩子中获取节点信息,当然也可以在其他函数中,只要保证视图完成初始化即可。

QueryList是一个不可变的列表,其存在一个名为changes的Observable变量,因此可以被订阅,结合notifyOnChanges方法,可以实时查看QueryList中变量的变化。调用notifyOnChanges函数后,当组件的输入发生变化时会触发Observable发出新的值,这样当todoNames: QueryList<ElementRef>有更新时,便能通过下面代码查看到变化:

this.todoNames.changes.subscribe(data => data._results.forEach(
 e=>console.log(e.nativeElement.innerText)));
this.todoNames.notifyOnChanges();

@ContentChild和@ContentChildren

看着与@ViewChild和@ViewChildren很相似,但@ContentChild和@ContentChildren是获取组件标签中的内容的,懒得写例子,这里直接贴上angular中文官网的一个例子:

import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core';
@Directive({selector: 'pane'})
export class Pane {
 @Input() id: string;
}
@Component({
 selector: 'tab',
 template: `
 <div>panes: {{serializedPanes}}</div> 
 `
})
export class Tab {
 @ContentChildren(Pane) panes: QueryList<Pane>;
 get serializedPanes(): string { return this.panes ? this.panes.map(p => p.id).join(', ') : ''; }
}
@Component({
 selector: 'example-app',
 template: `
 <tab>
  <pane id="1"></pane>
  <pane id="2"></pane>
  <pane id="3" *ngIf="shouldShow"></pane>
 </tab>
 <button (click)="show()">Show 3</button>
 `,
})
export class ContentChildrenComp {
 shouldShow = false;
 show() { this.shouldShow = true; }
}

可以看出@ContentChildren(Pane) panes: QueryList<Pane>;获取的是组件Tab中的内容:

<tab>
  <pane id="1"></pane>
  <pane id="2"></pane>
  <pane id="3" *ngIf="shouldShow"></pane>
 </tab>

与@ViewChild类似@ContentChild获取的是第一个Pane指令,获取DOM元素后,可以采用类似的方式处理。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家三水点靠木的支持。

Javascript 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
小程序实现筛子抽奖
May 26 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 #Javascript
Angular2使用jQuery的方法教程
May 28 #jQuery
Angular.js实现动态加载组件详解
May 28 #Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 #Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 #Javascript
Angular2入门教程之模块和组件详解
May 28 #Javascript
关于Angular2 + node接口调试的解决方案
May 28 #Javascript
You might like
php搜索文件程序分享
2015/10/30 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
俄罗斯女装店:12storeez
2019/10/25 全球购物
自主招生学校推荐信范文
2015/03/26 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
初中毕业感言300字
2015/07/31 职场文书
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记