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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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 无限级缓存的类的扩展
2009/03/16 PHP
PHP 组件化编程技巧
2009/06/06 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
解析link_mysql的php版
2013/06/30 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
javascript的函数作用域
2014/11/12 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
Python3模拟登录操作实例分析
2019/03/12 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
生产总经理岗位职责
2013/12/19 职场文书
运动会开幕式邀请函
2014/01/22 职场文书
洗车工岗位职责
2014/03/15 职场文书
殡葬服务心得体会
2014/09/11 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
js 实现验证码输入框示例详解
2022/09/23 Javascript