So erhalten Sie Knoten in Angular2

In Angular2 unterstützen TS-Dateien JS-Code. Warum kann ich mit document.getElementById keine Elementknoten abrufen? Tatsächlich wird in Angular2 zuerst die TS-Datei und dann die Ansicht geladen, sodass der Knoten nicht abgerufen werden kann. Dieser Artikel stellt hauptsächlich vor, wie man Knoten in Angular2 erhält, und stellt mehrere Methoden im Detail vor, die einen gewissen Referenzwert haben. Ich hoffe, dass sie jedem helfen können.

Der direkte Betrieb des DOM in der Anwendungsschicht führt zu einer starken Kopplung zwischen der Anwendungsschicht und der Rendering-Schicht, was dazu führt, dass unsere Anwendung nicht in verschiedenen Umgebungen ausgeführt werden kann, z. B. in Web-Workern, da sie sich in der Web-Worker-Umgebung befinden , es kann das DOM nicht direkt manipulieren.

Über ElementRef können wir native Elemente in der Ansichtsebene unter verschiedenen Plattformen kapseln (in einer Browserumgebung beziehen sich native Elemente normalerweise auf DOM-Elemente). Schließlich können wir mithilfe der leistungsstarken Abhängigkeitsinjektionsfunktion von Angular Folgendes tun: Wir können problemlos auf native Elemente zugreifen.

angular2 verfügt über einen Lebenszyklus-Hook AfterViewInit, der uns helfen kann, die entsprechenden ts auszuführen, nachdem die Ansicht geladen wurde

ts:

import { Component， ElementRef ，AfterViewInit} from '@angular/core';

exportclassAppComponent { 

constructor(privateelementRef: ElementRef) {

 }

ngAfterViewInit() {

  let pEle =this.elementRef.nativeElement.querySelector('p');//获取第一个p

  console.dir(pEle);

  let p = doxcument.getElementById("p");  //获取id为‘p'的节点

}

}

Unten finden Sie eine Optimierungslösung, die den integrierten Attributdekorator von Angular @ViewChild verwendet

ts:

import{ Component, ElementRef, ViewChild, AfterViewInit }from'@angular/core';

exportclassAppComponent{

@ViewChild('greet')

 greetp: ElementRef;

ngAfterViewInit() {this.greetp.nativeElement.style.backgroundColor ='red'; }

}

html:

<p #greet>hello world</p>  //element的标识"#name",@ViewChild根据这个搜索元素

So erhalten Sie Dom-Elemente in Winkel

Schritt-Aufschlüsselung:

Schritt eins: Geben Sie das Element an Erhalten Sie eine NG-Modellvariable und binden Sie Ereignisse!

Code kopieren Der Code lautet wie folgt:

1d7d0fb93576972432c8c690ad33c06e94b3e26ee717c64999d7867364b1b4a3 //Geben Sie dem abzurufenden Element eine ng-Model-Variable

Schritt 2: Verwenden Sie $event.target im Controller, um die abzurufen Dom-Element!

$scope.switchImage = function($event, value) { 
      3       $($event.target).on("mouseenter mouseleave",function(e) {
         var w = $(this).width(); // 得到盒子宽度
         var h = $(this).height();// 得到盒子高度
         var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
         // 获取x值
         var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
         // 获取y值
         var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 
　　　　　　　　　　　　//direction的值为“0,1,2,3”分别对应着“上，右，下，左”
         // 将点的坐标对应的弧度值换算成角度度数值
         var dirName = new Array('上方','右侧','下方','左侧');
         if(e.type == 'mouseenter' && direction == 1){
           $(this).find('.profil-photo').html(dirName[direction]+'离开');

　　　　　　　　　　　　}else{ 
 　　　　　　　　　　　　　$(this).find('.profil-photo').html(dirName[direction]+'离开'); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}

Verwandte Empfehlungen:

JS-Methode zum Abrufen der Brüder-, Eltern- und Kinderelemente eines Knotens_Javascript-Fähigkeiten

jQuery-Methode zum Abrufen von Knoten- und Unterknotentext_jquery

jquery zum Abrufen von Knotenname_jquery

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