Comment éviter les malentendus lors de l'utilisation de Dom dans Angular

Cette fois, je vais vous montrer comment éviter les malentendus liés à l'utilisation de Dom en Angular. Quelles sont les précautions lors de l'utilisation de Dom en Angular. Voici des cas pratiques, jetons un coup d'œil.

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 directement en utilisant javascript et le langage jquery est instable car la compilation ne sera pas détectée. erreurs à l'avance, donc angulaire2 choisira le langage dactylographié, un surensemble de javascript (ce langage peut détecter les erreurs lors de la compilation).

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 Angular2 DOM fait-il fonctionner le mécanisme ?

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, la classe abstraite 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");
 }
}

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 :

Un résumé de l'utilisation des instructions intégrées de Vue

Comment utiliser l'API FileReader pour créer un lecteur de fichiers Vue

Comment réagir implémente-t-il le fractionnement du code de page et le chargement à la demande

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!