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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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分页示例代码
2007/03/19 PHP
php实现头像上传预览功能
2017/04/27 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
js form action动态修改方法
2008/11/04 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
json数据的列循环示例
2013/09/06 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
新颖的化妆品活动方案
2014/08/21 职场文书
2019大学生实习报告
2019/06/21 职场文书