详解如何在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 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
JQuery 学习笔记 选择器之六
Jul 23 Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
通过JavaScript控制字体大小的代码
Oct 04 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
js中的this的指向问题详解
Aug 29 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 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类中private属性继承问题分析
2012/11/01 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php实现复制移动文件的方法
2015/07/29 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
python引用DLL文件的方法
2015/05/11 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
python支付宝支付示例详解
2019/08/22 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Python callable内置函数原理解析
2020/03/05 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
自立自强的名人事例
2014/02/10 职场文书
园艺师求职信
2014/04/27 职场文书
客服专员岗位职责
2015/02/10 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python