Was sind die Vorsichtsmaßnahmen für die Verwendung von Dom in Angular2?

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von Dom in Angular2 erläutern. Das Folgende ist ein praktischer Fall, 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 JQuery-Sprachen ist instabil, da ihre Kompilierung nicht im Voraus erkannt wird . Fehler, also wählt Angular2 die TypeScript-Sprache, die eine Obermenge von Javascript ist (bei der Kompilierung dieser Sprache können Fehler auftreten).

Drei falsche Möglichkeiten, DOM zu betreiben:

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

3 Was ist der Mechanismus der DOM-Operation in Angular2?

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 die Unterschiede zwischen ihnen tiefgreifend verstehen Was ist der Unterschied in der Methode und warum machen wir das? Sonst können wir die Schönheit dieser Sprache nicht verstehen.

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:

Verwenden Sie AngularJS von Grund auf, um die Anwendungsmodularisierung zu implementieren

So verwenden Sie Vue, um eine einzelne- Seitenanwendung Front-End-Routing

Das obige ist der detaillierte Inhalt vonWas sind die Vorsichtsmaßnahmen für die Verwendung von Dom in Angular2?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!