Évitez les malentendus Dom lors de l'utilisation d'Angular2

Cette fois je vais vous apporter quelques précautions pour éviter les malentendus Dom lors de l'utilisation d'Angular2. Voici des cas pratiques, jetons un oeil.

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

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 :

L'utilisation des instructions intégrées de vue

Cas d'utilisation de Vuex dans React

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!