Maison > interface Web > js tutoriel > Évitez les malentendus Dom lors de l'utilisation d'Angular2

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

php中世界最好的语言
Libérer: 2018-04-20 14:02:43
original
1313 Les gens l'ont consulté

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
 }
}
Copier après la connexion

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>
Copier après la connexion

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");
 }
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal