詳解如何在angular2中獲取節(jié)點

發(fā)布時間：2020-10-09 10:28:41 來源：腳本之家閱讀：203 作者：雨未濃欄目：web開發(fā)

我們知道在angular2中ts文件支持js代碼，為什么用document.getElementById沒法獲取元素節(jié)點呢？

其實在angular2中先加載ts文件，再加載view，所以獲取不到節(jié)點。

在應(yīng)用層直接操作 DOM，就會造成應(yīng)用層與渲染層之間強(qiáng)耦合，導(dǎo)致我們的應(yīng)用無法運(yùn)行在不同環(huán)境，如 web worker 中，因為在 web worker 環(huán)境中，是不能直接操作 DOM。

通過 ElementRef 我們就可以封裝不同平臺下視圖層中的 native 元素 (在瀏覽器環(huán)境中，native 元素通常是指 DOM 元素)，最后借助于 Angular 提供的強(qiáng)大的依賴注入特性，我們就可以輕松地訪問到 native 元素。

angular2有生命周期鉤子AfterViewInit可以幫助我們在view加載完之后再執(zhí)行相應(yīng)的ts

ts:

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

exportclassAppComponent { 

constructor(privateelementRef: ElementRef) {

 }

ngAfterViewInit() {

  let divEle =this.elementRef.nativeElement.querySelector('div');//獲取第一個div

  console.dir(divEle);

  let div = doxcument.getElementById("div");  //獲取id為‘div'的節(jié)點

}

}

下面有一種優(yōu)化方案，運(yùn)用angular內(nèi)置屬性裝飾器@ViewChild

ts:

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

exportclassAppComponent{

@ViewChild('greet')

 greetDiv: ElementRef;

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

}

html:

<div #greet>hello world</div>  //element的標(biāo)識"#name",@ViewChild根據(jù)這個搜索元素

angular中怎么獲取dom元素

步驟分解：

第一步：給要獲取的元素一個ng-model變量，并且綁定事件啦！

復(fù)制代碼代碼如下:

<div class="home" ng-model="dirName"  ng-mouseenter="switchImage($event,dirName)"></div>  //給要獲取的元素一個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”分別對應(yīng)著“上，右，下，左”
         // 將點的坐標(biāo)對應(yīng)的弧度值換算成角度度數(shù)值
         var dirName = new Array('上方','右側(cè)','下方','左側(cè)');
         if(e.type == 'mouseenter' && direction == 1){
           $(this).find('.profil-photo').html(dirName[direction]+'離開');

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

詳解如何在angular2中獲取節(jié)點

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽