So vermeiden Sie Missverständnisse bei der Verwendung von Dom in Angular

Dieses Mal zeige ich Ihnen, wie Sie Missverständnisse bei der Verwendung von Dom in Angular vermeiden können. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Dom in Angular? Hier sind praktische Fälle.

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 Verwendung von Javascript und der JQuery-Sprache ist instabil, da sie nicht erkannt werden 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>

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

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:

Eine Zusammenfassung der Verwendung der integrierten Anweisungen von Vue

So verwenden Sie die FileReader-API um einen Vue-Dateireader zu erstellen

Wie implementiert React die Aufteilung des Seitencodes und das Laden bei Bedarf?

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