首頁  >  文章  >  web前端  >  在angular2中取得節點的方法

在angular2中取得節點的方法

小云云
小云云原創
2017-12-18 13:23:162586瀏覽

在angular2中ts檔案支援js程式碼,為什麼用document.getElementById沒辦法取得元素節點呢?其實在angular2中先載入ts文件,再載入view,所以取得不到節點。本文主要介紹如何在angular2中取得節點,詳細的介紹了幾種方法,具有一定的參考價值,有興趣的小夥伴們可以參考一下,希望能幫助到大家。

在應用程式層直接操作DOM,就會造成應用層與渲染層之間強耦合,導致我們的應用無法運作在不同環境,如web worker 中,因為在web worker 環境中,是不能直接操作DOM。

透過ElementRef 我們就可以封裝不同平台下視圖層中的native 元素(在瀏覽器環境中,native 元素通常是指DOM 元素),最後借助於Angular 提供的強大的依賴注入特性,我們就可以輕鬆地存取native 元素。

angular2有生命週期鉤子AfterViewInit可以幫助我們在view載入完之後再執行對應的ts

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

}

}

下面有一個最佳化方案,運用angular內建屬性裝飾器@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根据这个搜索元素


angular中怎麼取得dom元素

步驟分解:

第一步:給要取得的元素一個ng-model變量,並且綁定事件啦!


複製程式碼

程式碼如下:

8efe8b80991594a3cf60db722e497dce94b3e26ee717c64999d7867364b1b4a3  //給要取得的元素一個ng-model變數

第二步:在controller中利用$event.target取得dom元素即可!

$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(&#39;上方&#39;,&#39;右侧&#39;,&#39;下方&#39;,&#39;左侧&#39;);
         if(e.type == &#39;mouseenter&#39; && direction == 1){
           $(this).find(&#39;.profil-photo&#39;).html(dirName[direction]+&#39;离开&#39;);

            }else{ 
              $(this).find(&#39;.profil-photo&#39;).html(dirName[direction]+&#39;离开&#39;); 
          } 
        }); 
      }
相關推薦:

######JS取得節點的兄弟,父級,子級元素的方法_javascript技巧## ##########jQuery取得節點和子節點文字的方法_jquery#############jquery取得節點名稱_jquery######

以上是在angular2中取得節點的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn