我们知道在angular2中ts文件支持js代码,为什么用. getelementbyid没法获取元素节点呢?
其实在angular2中先加载ts文件,再加载看来,所以获取不到节点。
在应用层直接操作DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如网络工作者中,因为在web worker环境中,是不能直接操作DOM。
通过ElementRef我们就可以封装不同平台下视图层中的本地元素(在浏览器环境中,本地元素通常是指DOM元素),最后借助于角提供的强大的依赖注入特性,我们就可以轻松地访问到本地元素。
angular2有生命周期钩子AfterViewInit可以帮助我们在视图加载完之后再执行相应的ts
ts:
从“进口{组件、ElementRef AfterViewInit} @angular/核心”;
exportclassAppComponent {
构造函数(privateelementRef: ElementRef) {
｝
ngAfterViewInit () {
让divEle=this.elementRef.nativeElement.querySelector (div);//获取第一个div
console.dir (divEle);
让div=doxcument.getElementById (" div ");//获取为id的div的节点
｝
｝
之前
下面有一种优化方案,运用角内置属性装饰器@ViewChild
ts:
进口{组件,ElementRef、ViewChild AfterViewInit} ' @angular/核心”;
exportclassAppComponent {
@ViewChild(“问候”)
greetDiv: ElementRef;
{this.greetDiv.nativeElement.style ngAfterViewInit ()。写成backgroundColor=昂焐?｝
｝
之前
html:
& lt; div# greet>你好world</div>//元素的标识“#名称”,@ViewChild根据这个搜索元素
<>强角中怎么获取dom元素
步骤分解:
第一步:给要获取的元素一个ng-model变量,并且绑定事件啦!
代码如下:
& lt; div类=凹摇眓g-model=澳柯济?ng-mouseenter=" switchImage(美元事件,目录名)”祝辞& lt;/div>,//给要获取的元素一个ng-model变量
第二步:在控制器中利用美元的事件。目标获取dom元素即可。
美元的范围。switchImage=函数(事件,美元价值){
3美元(event.target美元)。(“mouseenter mouseleave”功能(e) {
var w=$(这).width ();//得到盒子宽度
h=$ var(这).height();//得到盒子高度
var x=(e。pageX——这一点。(offsetLeft) - w/2) * (w比;h & # 63;(h/w): 1);//获取x值
var y=(e。pageY——这一点。(offsetTop) - h/2) * (h比;w & # 63;(w/h): 1);//获取y值
var=Math.round((((数学方向。量化(y、x) * (180/Math.PI)) + 180)/90) + 3) % 4;//方向的值为“0、1、2、3”分别对应着”上,右,下,左”//将点的坐标对应的弧度值换算成角度度数的值
var目录名=new Array(的上方”,“右侧”,“下方”,“左”侧);
如果(e。类型==甿ouseenter’,,方向==1){
(美元);(.profil-photo) . html(目录名(方向)+“离开”);
其他}{
(美元);(.profil-photo) . html(目录名(方向)+“离开”);
｝
});
｝
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
