详解如何在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 浮动广告实现代码
Dec 25 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
vuex进阶知识点巩固
May 20 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
Nov 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP的加密方式及原理
2012/06/14 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP函数积累总结
2019/03/19 PHP
event对象的方法 兼容多浏览器
2009/06/27 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
Python中index()和seek()的用法(详解)
2017/04/27 Python
解决Django数据库makemigrations有变化但是migrate时未变动问题
2018/05/30 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
小学生读书活动总结
2014/06/30 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
社区党员公开承诺书
2014/08/30 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
婚宴来宾致辞
2015/07/28 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
spring boot中nativeQuery的用法
2021/07/26 Java/Android
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js
Golang ort 中的sortInts 方法
2022/04/24 Golang