详解如何在angular2中获取节点


Posted in Javascript onNovember 23, 2017

我们知道在angular2中ts文件支持js代码,为什么用document.getElementById没法获取元素节点呢?

其实在angular2中先加载ts文件,再加载view,所以获取不到节点。

在应用层直接操作 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 divEle =this.elementRef.nativeElement.querySelector('div');//获取第一个div

  console.dir(divEle);

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

}

}

下面有一种优化方案,运用angular内置属性装饰器@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的标识"#name",@ViewChild根据这个搜索元素

angular中怎么获取dom元素

步骤分解:

第一步:给要获取的元素一个ng-model变量,并且绑定事件啦!

<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”分别对应着“上,右,下,左”
         // 将点的坐标对应的弧度值换算成角度度数值
         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]+'离开'); 





} 




}); 



}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 #Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 #Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 #Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 #Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 #Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 #Javascript
基于JavaScript实现表格滚动分页
Nov 22 #Javascript
You might like
php 错误处理经验分享
2011/10/11 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Android interview questions
2016/12/25 面试题
财务主管自我鉴定
2014/01/17 职场文书
社区七一党员活动方案
2014/01/25 职场文书
医院总经理岗位职责
2014/02/04 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
公司岗位说明书
2015/10/08 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书