这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

前言

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");
 }
}

总结

学习一种语言其实我们首先应该去遵循他的规范,接受他和之前语言的不同之处,然后再去深入理解和之前的方式不一样在哪里,为什么这么做,否则我们无法理解这种语言的妙处,希望对你有帮助!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
欧盟批准220亿美元收购 沃达丰成欧洲最大综合运营商

欧盟批准220亿美元收

去年5月,沃达丰宣布将收购Liberty Global的德国和中欧
滴滴顺风车发整改方案 优化226项功能推女性保护计划

滴滴顺风车发整改方案

对整改方案进行细化和打磨,聚焦“全程安心保障”、“保
李楠离职 魅族失血

李楠离职 魅族失血

李楠还是走了。
苹果高管赴韩访问三星 商讨iPhone芯片潜在短缺问题

苹果高管赴韩访问三星

三星的芯片生产有可能会受到日(J)本(P)和韩国之间的争端的影
Netflix财报营收不及预期 开盘大跌逾10%

Netflix财报营收不及

Netflix开盘大跌10.64%,报323.89美元。
顺丰控股:6月速运物流业务收入同比增长14%

顺丰控股:6月速运物流

顺丰控股公告称,公司6月速运物流业务营业收入为86.79亿
最新文章
Javascript读写cookie的实例源码

Javascript读写cookie

今天小编就为大家分享一篇关于Javascript读写cookie的
微信小程序登录session的使用

微信小程序登录sessio

这篇文章主要介绍了微信小程序登录session的使用,小编
JavaScript中this用法学习笔记

JavaScript中this用法

在本篇文章里小编给大家分享了关于JavaScript中this用
nodejs微信开发之授权登录+获取用户信息

nodejs微信开发之授权

这篇文章主要介绍了nodejs微信开发之授权登录+获取用
nodejs微信开发之自动回复的实现

nodejs微信开发之自动

这篇文章主要介绍了nodejs微信开发之自动回复的实现,文
node微信开发之获取access_token+自定义菜单

node微信开发之获取ac

这篇文章主要介绍了node微信开发之获取access_token+