How to get nodes in angular2

In angular2, ts files support js code. Why can’t I get element nodes using document.getElementById? In fact, in angular2, the ts file is loaded first, and then the view is loaded, so the node cannot be obtained. This article mainly introduces how to obtain nodes in angular2, and introduces several methods in detail, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Directly operating the DOM in the application layer will cause strong coupling between the application layer and the rendering layer, causing our application to be unable to run in different environments, such as web workers, because in the web worker environment, it cannot Directly manipulate the DOM.

Through ElementRef, we can encapsulate native elements in the view layer under different platforms (in a browser environment, native elements usually refer to DOM elements). Finally, with the help of the powerful dependency injection feature provided by Angular, we You can easily access native elements.

angular2 has a life cycle hook AfterViewInit that can help us execute the corresponding ts after the view is loaded

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'的节点

}

}

The following There is an optimization solution, using angular's built-in attribute decorator @ViewChild

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根据这个搜索元素

How to get dom elements in angular

Step breakdown:

Step one: Give the element to be obtained an ng-model variable and bind it It’s an event!

Copy code The code is as follows:

c7cf7dcafcff3366ccd43bd76257b89594b3e26ee717c64999d7867364b1b4a3 //Give the element to be obtained an ng-model variable

Step 2: Use $event.target in the controller to obtain the 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]+'离开'); 
　　　　　　　　　　} 
　　　　　　　　}); 
　　　　　　}

Related recommendations:

JS method of getting the brothers, parents, and child elements of a node_javascript skills

jQuery method of getting node and sub-node text_jquery

jquery getting node name_jquery

The above is the detailed content of How to get nodes in angular2. For more information, please follow other related articles on the PHP Chinese website!