Angular ElementRef简介及其使用

2023-09-07 19:47:05 186

Angular的口号是-“一套框架，多种平台。同时适用手机与桌面(Oneframework.Mobile&desktop.)”，即Angular是支持开发跨平台的应用，比如：Web应用、移动Web应用、原生移动应用和原生桌面应用等。

为了能够支持跨平台，Angular通过抽象层封装了不同平台的差异，统一了API接口。如定义了抽象类Renderer、抽象类RootRenderer等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef、ComponentRef和ViewContainerRef等。

下面我们就来分析一下ElementRef类：

ElementRef的作用

在应用层直接操作DOM，就会造成应用层与渲染层之间强耦合，导致我们的应用无法运行在不同环境，如webworker中，因为在webworker环境中，是不能直接操作DOM。有兴趣的读者，可以阅读一下[WebWorkers中支持的类和方法][1]这篇文章。通过ElementRef我们就可以封装不同平台下视图层中的native元素(在浏览器环境中，native元素通常是指DOM元素)，最后借助于Angular提供的强大的依赖注入特性，我们就可以轻松地访问到native元素。

ElementRef的定义

//angular-master/packages/core/src/linker/element_ref.ts
exportclassElementRef{
publicnativeElement:T;
constructor(nativeElement:T){this.nativeElement=nativeElement;}
}

ElementRef的应用

我们先来介绍一下整体需求，我们想在页面成功渲染后，获取页面中的div元素，并改变该div元素的背景颜色。接下来我们来一步步，实现这个需求。

首先我们要先获取div元素，在文中“ElementRef的作用”部分，我们已经提到可以利用Angular提供的强大的依赖注入特性，获取封装后的native元素。在浏览器中native元素就是DOM元素，我们只要先获取my-app元素，然后利用querySelectorAPI就能获取页面中div元素。具体代码如下：

import{Component,ElementRef}from'@angular/core';

@Component({
selector:'my-app',
template:`
WelcometoAngularWorld
Hello{{name}}
`,
})
exportclassAppComponent{
name:string='Semlinker';

constructor(privateelementRef:ElementRef){
letdivEle=this.elementRef.nativeElement.querySelector('div');
console.dir(divEle);
}
}

运行上面代码，在控制台中没有出现异常，但是输出的结果却是null。什么情况？没有抛出异常，我们可以推断this.elementRef.nativeElement这个对象是存在，但却找不到它的子元素，那应该是在调用构造函数的时候，my-app元素下的子元素还未创建。

那怎么解决这个问题呢？沉思中…，不是有setTimeout么，我们在稍微改造一下：

constructor(privateelementRef:ElementRef){
setTimeout(()=>{//此处需要使用箭头函数哈，你懂的...
letdivEle=this.elementRef.nativeElement.querySelector('div');
console.dir(divEle);
},0);
}

更新一下代码，此时控制台成功输出了div。为什么添加个setTimeout就能成功获取到想要的div元素呢？此处就不展开了，有兴趣的读者可以参考-[Whattheheckistheeventloopanyway?][2]这个演讲的示例。

问题解决了，但感觉不是很优雅？有没有更好的方案，答案是肯定的。Angular不是有提供组件生命周期的钩子，我们可以选择一个合适的时机，然后获取我们想要的div元素。

import{Component,ElementRef,AfterViewInit}from'@angular/core';

@Component({
selector:'my-app',
template:`
WelcometoAngularWorld
Hello{{name}}
`,
})
exportclassAppComponent{

name:string='Semlinker';

//在构造函数中this.elementRef=elementRef是可选的，编译时会自动赋值
//functionAppComponent(elementRef){this.elementRef=elementRef;}
constructor(privateelementRef:ElementRef){}

ngAfterViewInit(){//模板中的元素已创建完成
console.dir(this.elementRef.nativeElement.querySelector('div'));
//letgreetDiv:HTMLElement=this.elementRef.nativeElement.querySelector('div');
//greetDiv.style.backgroundColor='red';
}
}

运行一下上面的代码，我们看到了意料中的div元素。我们直接选用ngAfterViewInit这个钩子，不要问我为什么，因为它看得最顺眼咯。不过我们后面也会有专门的文章，详细分析一下Angular组件的生命周期。成功取到div元素，就剩下的事情就好办了，直接通过style对象设置元素的背景颜色。

功能虽然已经实现了，但还有优化的空间么？当然有咯！其实在Angular框架内部已经为我们提供了解决方案，它为我们提供了内置的装饰器，如@ContentChild、@ContentChildren、@ViewChild、@ViewChildren等。

具体使用示例如下：

import{Component,ElementRef,ViewChild,AfterViewInit}from'@angular/core';

@Component({
selector:'my-app',
template:`
WelcometoAngularWorld
Hello{{name}}

`, }) exportclassAppComponent{ name:string='Semlinker'; @ViewChild('greet') greetDiv:ElementRef; ngAfterViewInit(){ this.greetDiv.nativeElement.style.backgroundColor='red'; } }

是不是感觉瞬间高大上了，不过先等等，上面的代码是不是还有进一步的优化空间呢？我们看到设置div元素的背景，我们是默认应用的运行环境在是浏览器中。前面已经介绍了，我们要尽量减少应用层与渲染层之间强耦合关系，从而让我们应用能够灵活地运行在不同环境。

最后我们来看一下，最终优化后的代码：

import{Component,ElementRef,ViewChild,AfterViewInit,Renderer2}from'@angular/core';

@Component({
selector:'my-app',
template:`
WelcometoAngularWorld
Hello{{name}}

`, }) exportclassAppComponent{ name:string='Semlinker'; @ViewChild('greet') greetDiv:ElementRef; constructor(privateelementRef:ElementRef,privaterenderer:Renderer2){} ngAfterViewInit(){ //this.greetDiv.nativeElement.style.backgroundColor='red'; this.renderer.setStyle(this.greetDiv.nativeElement,'backgroundColor','red'); } }

最后我们通过Renderer2实例提供的API优雅地设置了div元素的背景颜色。

我有话说

Renderer2API还有哪些常用的方法？

exportabstractclassRenderer2{
abstractcreateElement(name:string,namespace?:string|null):any;
abstractcreateComment(value:string):any;
abstractcreateText(value:string):any;
abstractsetAttribute(el:any,name:string,value:string,
namespace?:string|null):void;
abstractremoveAttribute(el:any,name:string,namespace?:string|null):void;
abstractaddClass(el:any,name:string):void;
abstractremoveClass(el:any,name:string):void;
abstractsetStyle(el:any,style:string,value:any,
flags?:RendererStyleFlags2):void;
abstractremoveStyle(el:any,style:string,flags?:RendererStyleFlags2):void;
abstractsetProperty(el:any,name:string,value:any):void;
abstractsetValue(node:any,value:string):void;
abstractlisten(
target:'window'|'document'|'body'|any,eventName:string,
callback:(event:any)=>boolean|void):()=>void;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Angular ElementRef简介及其使用

WelcometoAngularWorld

WelcometoAngularWorld

WelcometoAngularWorld

WelcometoAngularWorld

热门推荐

随机推荐