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 相关文章推荐
Jquery解析json数据详解
Dec 26 Javascript
JavaScript每天必学之事件
Sep 18 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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无限分类(树形类)的深入分析
2013/06/02 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
js自定义Tab选项卡效果
2017/06/05 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
layUI实现列表查询功能
2019/07/27 Javascript
layer.js open 隐藏滚动条的例子
2019/09/05 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
Python3 max()函数基础用法
2019/02/19 Python
简单了解Django ContentType内置组件
2019/07/23 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
python中如何设置代码自动提示
2020/07/15 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
成龙洗发水广告词
2014/03/14 职场文书
村委会贫困证明范本
2014/09/17 职场文书
上诉状格式
2015/05/23 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
小学作文之描写天气
2019/08/15 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript