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 相关文章推荐
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
javascript 写类方式之八
2009/07/05 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
python海龟绘图实例教程
2014/07/24 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python随机数分布random测试
2018/08/27 Python
python hough变换检测直线的实现方法
2019/07/12 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python实现拼接图片
2020/03/23 Python
pyqt5中动画的使用详解
2020/04/01 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
python里glob模块知识点总结
2021/01/05 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
拔河比赛口号
2014/06/10 职场文书
2015年班干部工作总结
2015/04/29 职场文书
创业计划之特色精品店
2019/08/12 职场文书
Redis 异步机制
2022/05/15 Redis