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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
JavaScript随机数的组合问题案例分析
May 16 Javascript
CocosCreator入门教程之网络通信
Apr 16 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 启动报错如何解决
2014/01/17 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
python中提高pip install速度
2020/02/14 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Python自动创建Excel并获取内容
2020/09/16 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
应届生服务员求职信
2013/10/31 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
服务质量承诺书
2014/03/27 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
工作散漫检讨书
2014/09/16 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
博士给导师的自荐信
2015/03/06 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android