How to avoid Dom misunderstandings in advanced Angular2

This article mainly introduces how to avoid Dom misunderstandings in advanced Angular2. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Preface

The design goal of Angular2 is to make the browser and DOM independent. The DOM is complex, so decoupling components from it will make our applications easier to test and refactor. In order to support cross-platform, Angular also encapsulates the differences of different platforms through abstraction.

Content

#1. Why can’t the DOM be manipulated directly?

Angular2 adopts AOT static compilation mode. In this form, our template type must be stable and safe. Directly using javascript and jquery language is unstable because their compilation is not stable. Errors will be discovered in advance, so angular2 will choose the typescript language, a superset of javascript (errors can be found during compilation of this language).

2. Three incorrect ways to operate DOM:

@Component({ ... })
export class HeroComponent {
 constructor(private _elementRef: ElementRef) {}

 doBadThings() {
  $('id').click(); //jquery
  this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
  document.getElementById('id'); //javascript
 }
}

## 3.How does Angular2 use DOM manipulation mechanism?

In order to support cross-platform, Angular encapsulates the differences of different platforms through an abstraction layer. For example, abstract classes Renderer, Renderer2, abstract class RootRenderer, etc. are defined. In addition, the following reference types are defined: ElementRef, TemplateRef, ViewRef, ComponentRef, ViewContainerRef, etc.

4. Correct way to operate DOM (ElementRef and Renderer2):

product.component.html

<p>商品信息</p>
<ul>
 <li *ngFor="let product of dataSource| async as list">
  {{product.title}}
 </li>
</ul>
<p #dia>
</p>

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

##Summary

Learning 1 In fact, for this language, we should first follow its specifications, accept its differences from previous languages, and then deeply understand how it is different from the previous language and why we do this. Otherwise, we will not be able to understand the beauty of this language. ,Hope it helps you!

##

The above is the detailed content of How to avoid Dom misunderstandings in advanced Angular2. For more information, please follow other related articles on the PHP Chinese website!