So vermeiden Sie Dom-Missverständnisse im fortgeschrittenen Angular2

Dieser Artikel stellt hauptsächlich vor, wie man Dom-Missverständnisse in fortgeschrittenem Angular2 vermeidet. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.

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 Kompilierungsmodus AOT. In dieser Form muss unser Vorlagentyp stabil und sicher sein. Die direkte Verwendung von Javascript und JQuery-Sprachen ist instabil, da ihre Kompilierung nicht stabil ist . Fehler werden im Voraus entdeckt, daher wählt angle2 die Typoskript-Sprache, eine Obermenge von Javascript (Fehler können während der Kompilierung dieser Sprache gefunden werden).

3 Möglichkeiten, DOM falsch 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 nutzt Angular2 den DOM-Manipulationsmechanismus?

Um plattformübergreifend zu unterstützen, kapselt Angular die Unterschiede verschiedener Plattformen durch Abstraktionsschichten. Beispielsweise sind die abstrakten Klassen Renderer, Renderer2, die 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

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

Zusammenfassung

Tatsächlich sollten wir beim Erlernen einer Sprache zunächst deren Spezifikationen befolgen, die Unterschiede zwischen ihr und der vorherigen Sprache akzeptieren und dann tiefgreifend verstehen, was sich von der vorherigen Methode unterscheidet und warum wir dies tun, sonst werden wir es nicht schaffen Um die Schönheit der Sprache zu verstehen, hoffe ich, dass es Ihnen hilft!

Das obige ist der detaillierte Inhalt vonSo vermeiden Sie Dom-Missverständnisse im fortgeschrittenen Angular2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!