So verwenden Sie Dom in Angular2

Dieses Mal zeige ich Ihnen, wie Sie Dom in Angular2 verwenden und welche Vorsichtsmaßnahmen bei der Verwendung von Dom in Angular2 gelten. 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 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 Angular2

DOM ? 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

<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:

Detaillierte Erklärung der Vuex-Methode in React

Detaillierte Erklärung der Verwendung von NodeJS Multi- Versionsverwaltung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Dom in Angular2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!