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 api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
jquery实现拖动效果
Aug 10 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
Python中的pprint折腾记
2015/01/21 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
上班早退检讨书
2014/01/09 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
公司酒会主持词
2015/07/02 职场文书
Redis可视化客户端小结
2021/06/10 Redis
Python使用openpyxl模块处理Excel文件
2022/06/05 Python