详解如何在angular2中获取节点
时间:2019-04-10
本文章向大家介绍详解如何在angular2中获取节点,主要包括详解如何在angular2中获取节点使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们知道在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]+'离开'); } }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Hadoop数据分析平台实战——190Highcharts介绍离线数据分析平台实战——190Highcharts介绍
- HUST 1555 A Math Homework
- HUST 1541 Student’s question
- HDU 3785 寻找大富翁
- Hadoop数据分析平台实战——250JSSDK数据收集引擎编写离线数据分析平台实战——250JSSDK数据收集引擎编写
- HDU 2564 词组缩写
- 约瑟夫问题方法总结
- 欧里几德及扩展欧里几德算法
- Hadoop数据分析平台实战——260用户数据ETL离线数据分析平台实战——260用户数据ETL
- # Hadoop离线数据分析平台实战——230项目数据存储结构设计Hadoop离线数据分析平台实战——230项目数据存储结构设计
- ECJTUACM16 Winter vacation training #5 题解&源码
- Codeforces 716A Crazy Computer
- Hadoop数据分析平台实战——240JavaSDK数据收集引擎编写离线数据分析平台实战——240JavaSDK数据收集引擎编写
- Hadoop离线数据分析平台实战——290活跃用户分析Hadoop离线数据分析平台实战——290活跃用户分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 「问答」解决jar包运行时相对路径问题
- 「Eclipse」生成能用命令行运行的jar包
- 「AndroidStudio」fastjson导包报错:Could not resolve com.alibaba:fastjson:1.1.56.android
- 「Android」通过注解自动生成类文件:APT实战(AbstractProcessor)
- 五、开始Github和码云之旅,新手如何上路
- 用 Shader 写个完美的波浪~
- K8s上的Go服务怎么扩容、发版更新、回滚、平滑重启?教你用Deployment全搞定!
- 图解Go内存管理器的内存分配策略
- why哥这里有一道Dubbo高频面试题,请查收。
- 「容器平台」Kubernetes网络策略101
- 架构师之路 - 服务器硬件扫盲
- 零基础Python教程045期 元组的增删改查测试实验
- 零基础Python教程044期 列表的函数方法,很耐用!
- 零基础Python教程047期 GUI窗体界面编程,迈出软件开发的第一步
- 零基础Python教程046期 矩阵行列互换算法,二维数组的典型应用