Comment éviter les malentendus Dom dans Angular2 avancé

Cet article présente principalement comment éviter les malentendus Dom dans Angular2 avancé. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Avant-propos

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 n'est pas stable. . Les erreurs seront découvertes à l'avance, donc angulaire2 choisira le langage typescript, un surensemble de javascript (des erreurs peuvent être trouvées lors de la compilation de ce langage).

2. Trois façons de faire fonctionner DOM de manière incorrecte :

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

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

3.Comment Angular2 utilise-t-il le mécanisme de manipulation du DOM ?

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, nous devons d'abord suivre ses spécifications, accepter les différences entre elle et la langue précédente, puis comprendre profondément ce qui est différent de la méthode précédente et pourquoi nous faisons cela, sinon nous ne pourrons pas pour comprendre ceci La beauté du langage, j'espère que cela vous aidera !

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!