Vermeiden Sie Dom-Missverständnisse bei der Verwendung von Angular2

Dieses Mal werde ich Ihnen einige Vorsichtsmaßnahmen vorstellen, um Dom-Missverständnisse bei der Verwendung von Angular2 zu vermeiden. Hier sind praktische Fälle, schauen wir uns das an.

Vorwort

Das Designziel von Angular2 besteht darin, den Browser und das DOM unabhängig zu machen. Das DOM ist komplex, daher erleichtert die Entkopplung von Komponenten das Testen und Refactoring unserer Anwendungen. Um plattformübergreifend zu unterstützen, kapselt Angular auch die Unterschiede verschiedener Plattformen durch Abstraktion.

Inhalt

1. Warum kann das DOM nicht direkt manipuliert werden?

Angular2 verwendet den statischen AOT-Kompilierungsmodus. In dieser Form muss unser Vorlagentyp stabil und sicher sein. Die direkte Verwendung von Javascript und der JQuery-Sprache ist instabil, da die Kompilierung nicht möglich ist Fehler im Voraus, daher wählt Angular2 die Typescript-Sprache, eine Obermenge von Javascript (diese Sprache kann Fehler während der Kompilierung erkennen).

Drei falsche Möglichkeiten, DOM zu bedienen:

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

3. Wie funktioniert der Angular2

DOM-Mechanismus? Um plattformübergreifend zu unterstützen, kapselt Angular die Unterschiede verschiedener Plattformen durch Abstraktionsschichten. Beispielsweise sind abstrakte Klasse

Renderer, Renderer2, abstrakte Klasse RootRenderer usw. definiert. Darüber hinaus sind folgende Referenztypen definiert: ElementRef, TemplateRef, ViewRef, ComponentRef, ViewContainerRef usw.

4. Richtige Art und Weise, DOM (ElementRef und Renderer2) zu bedienen:

product.component.html

product.component.ts

<p>商品信息</p>
<ul>
 <li *ngFor="let product of dataSource| async as list">
  {{product.title}}
 </li>
</ul>
<p #dia>
</p>

Zusammenfassung

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

Tatsächlich sollten wir beim Erlernen einer Sprache zunächst deren Spezifikationen befolgen, die Unterschiede zwischen ihr und der vorherigen Sprache akzeptieren und dann loslegen Verstehen Sie tiefer, was sich von der vorherigen Methode unterscheidet und warum wir dies tun, sonst können wir die Schönheit dieser Sprache nicht verstehen. Ich hoffe, sie wird Ihnen helfen!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Die Verwendung der in Vue integrierten Anweisungen

Vuex-Nutzungsfälle in React

Das obige ist der detaillierte Inhalt vonVermeiden Sie Dom-Missverständnisse bei der Verwendung von Angular2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!