Angular2进阶之如何避免Dom误区


Posted in Javascript onApril 02, 2018

前言

Angular2的设计目标本来就是要让浏览器和DOM独立。DOM是复杂的,因此使组件与它分离,会让我们的应用程序,更容易测试和重构。为了支持跨平台,Angular还通过抽象封装了不同平台的差异。

内容

1.为什么不能直接操作DOM?

Angular2采用AOT静态编译模式,这种形式下需要我们的模板类型必须是稳定和安全的,直接使用javascript和jquery语言是不稳定,因为他们的编译不会提前发现错误,所以angular2才会选择javascript的超集typescript语言(这种语言编译期间就能发现错误)。 

2.三种错误操作DOM的方式:

@Component({ ... })
export class HeroComponent {
 constructor(private _elementRef: ElementRef) {}

 doBadThings() {
  $('id').click(); //jquery
  this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
  document.getElementById('id'); //javascript
 }
}

3.Angular2如何DOM操作的机制?

为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer、Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。 

4.正确操作DOM的方式(ElementRef和Renderer2):

product.component.html

<div>商品信息</div>
<ul>
 <li *ngFor="let product of dataSource| async as list">
  {{product.title}}
 </li>
</ul>
<div #dia>
</div>

product.component.ts

import { Component, OnInit,Renderer2, ViewChild,ElementRef,AfterViewInit} from '@angular/core';
@Component({
 selector: 'app-product',
 templateUrl: './product.component.html',
 styleUrls: ['./product.component.css']
})

export class ProductComponent implements OnInit,AfterViewInit {
 @ViewChild('dia') dia:ElementRef ;定义子试图
 ngOnInit() {
 /**1.
 *创建一个文本
 */
  this.dia.nativeElement.innerHTML="这只是一个测试的文档";

 /**2.
  *添加click事件
  */
 let ul=this.element.nativeElement.querySelector('ul');
  this.render2.listen(ul,"click",()=>{
   this.render2.setStyle(ul,"background","blue");

ngAfterViewInit(){
/**3.
 *修改背景颜色
 */
 let li=this.element.nativeElement.querySelector('ul');
 this.render2.setStyle(li,"background","red");
 }
}

总结

学习一种语言其实我们首先应该去遵循他的规范,接受他和之前语言的不同之处,然后再去深入理解和之前的方式不一样在哪里,为什么这么做,否则我们无法理解这种语言的妙处,希望对你有帮助!

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

Javascript 相关文章推荐
用javascript作一个通用向导说明
Aug 30 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
Vue项目分环境打包的实现步骤
Apr 02 #Javascript
详解webpack-dev-server的简单使用
Apr 02 #Javascript
webpack v4 从dev到prd的方法
Apr 02 #Javascript
vue axios登录请求拦截器
Apr 02 #Javascript
webpack+react+antd脚手架优化的方法
Apr 02 #Javascript
vue axios请求超时的正确处理方法
Apr 02 #Javascript
JavaScript 日期时间选择器一些小结
Apr 02 #Javascript
You might like
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP 面向对象详解
2012/09/13 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python 不以科学计数法输出的方法
2018/07/16 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
Skyscanner波兰:廉价航班
2017/11/07 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
汽车专业毕业生推荐信
2013/11/12 职场文书
养殖项目策划书范文
2014/01/13 职场文书
物流业务员岗位职责
2014/02/08 职场文书
我爱读书演讲稿
2014/05/07 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
荒岛余生观后感
2015/06/09 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
python读取mnist数据集方法案例详解
2021/09/04 Python