Quelles sont les précautions d’utilisation de Dom dans Angular2 ?

Cette fois, je vais vous présenter quelles sont les précautions d'utilisation de Dom dans Angular2 Quelles sont les précautions d'utilisation de Dom dans Angular2 Ce qui suit est un cas pratique, jetons un coup d'oeil.

Préface

L'objectif de conception d'Angular2 est de rendre le navigateur et le DOM indépendants. Le DOM est complexe, donc en découpler les composants rendra nos applications plus faciles à tester et à refactoriser. Afin de prendre en charge plusieurs plates-formes, Angular encapsule également les différences entre les différentes plates-formes grâce à l'abstraction.

Contenu

1.Pourquoi le DOM ne peut-il pas être manipulé directement ?

Angular2 adopte le mode de compilation statique AOT. Sous cette forme, notre type de modèle doit être stable et sûr. L'utilisation directe des langages javascript et jquery​​est instable car leur compilation ne sera pas découverte à l'avance. . Erreur, donc angulaire2 choisira le langage typescript, qui est un surensemble de javascript (des erreurs peuvent être trouvées lors de la compilation de ce langage).

2. Trois façons incorrectes de faire fonctionner le DOM :

@Component({ ... })
export class HeroComponent {
 constructor(private _elementRef: ElementRef) {}
 doBadThings() {
  $('id').click(); //jquery
  this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
  document.getElementById('id'); //javascript
 }
}

3. Comment fonctionne le mécanisme de fonctionnement du DOM d'Angular2 ?

Afin de prendre en charge plusieurs plates-formes, Angular encapsule les différences des différentes plates-formes à travers des couches d'abstraction. Par exemple, les classes abstraites Renderer, Renderer2, la classe abstraite RootRenderer, etc. sont définies. De plus, les types de référence suivants sont définis : ElementRef, TemplateRef, ViewRef, ComponentRef, ViewContainerRef, etc.

4. Manière correcte d'utiliser DOM (ElementRef et 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");
 }
}

Résumé

En fait, lors de l'apprentissage d'une langue, il faut d'abord suivre ses spécifications, accepter les différences entre elle et la langue précédente, puis partir Comprenez plus profondément ce qui est différent de la méthode précédente et pourquoi nous faisons cela, sinon nous ne pourrons pas comprendre la beauté de ce langage, j'espère qu'il vous sera utile !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez AngularJS à partir de zéro pour implémenter la modularisation des applications

Comment utiliser vue pour créer un application de page Routage frontal

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!