Home  >  Article  >  Web Front-end  >  How to avoid misunderstandings when using Dom in Angular

How to avoid misunderstandings when using Dom in Angular

php中世界最好的语言
php中世界最好的语言Original
2018-04-08 14:27:421469browse

This time I will show you how to avoid the misunderstandings of using Dom in Angular. What are the precautions for using Dom in Angular? The following is a practical case, let's 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 they The compilation will not detect errors in advance, so angular2 will choose the typescript language, a superset of javascript (this language can detect errors during compilation).

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 DOM operate mechanism?

In order to support cross-platform, Angular encapsulates the differences of different platforms through abstraction layers. For example,

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Summary of the use of vue built-in instructions

##How to use the FileReader API to create a Vue file reader


How does react implement page code splitting and on-demand loading

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn