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 网页跳转的方法
Dec 24 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
简单了解前端渐进式框架VUE
Jul 20 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根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
php获取excel文件数据
2017/04/21 PHP
利用javascript查看html源文件
2006/11/08 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
jquery实现图片随机排列的方法
2015/05/04 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
管道维修工岗位职责
2013/12/27 职场文书
三爱活动实施方案
2014/03/19 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
公司联欢会主持词
2015/07/04 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Python turtle实现贪吃蛇游戏
2021/06/18 Python
python非标准时间的转换
2021/07/25 Python
javascript的var与let,const之间的区别详解
2022/02/18 Javascript