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 相关文章推荐
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
js中跨域方法原理详解
Jul 19 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 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递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
利用PHP实现短域名互转
2013/07/05 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
js仿360开机效果
2019/12/26 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
跟老齐学Python之list和str比较
2014/09/20 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python try 异常处理(史上最全)
2019/03/07 Python
Python实战之制作天气查询软件
2019/05/14 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
考博专家推荐信模板
2013/12/02 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
群众路线剖析材料
2014/02/02 职场文书
婚内房产协议书范本
2014/10/02 职场文书
交通安全教育心得体会
2016/01/15 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
MYSQL 运算符总结
2021/11/11 MySQL
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技