Angular4 ElementRef的应用
Angular的口号是-"一套框架，多种平台。同时适用手机与桌面(Oneframework.Mobile&desktop.)"，即Angular是支持开发跨平台的应用，比如：Web应用、移动Web应用、原生移动应用和原生桌面应用等。
为了能够支持跨平台，Angular通过抽象层封装了不同平台的差异，统一了API接口。如定义了抽象类Renderer、抽象类RootRenderer等。此外还定义了以下引用类型：ElementRef、TemplateRef、ViewRef、ComponentRef和ViewContainerRef等。下面我们就来分析一下ElementRef类：
ElementRef的作用
在应用层直接操作DOM，就会造成应用层与渲染层之间强耦合，导致我们的应用无法运行在不同环境，如webworker中，因为在webworker环境中，是不能直接操作DOM。有兴趣的读者，可以阅读一下WebWorkers中支持的类和方法这篇文章。通过ElementRef我们就可以封装不同平台下视图层中的native元素(在浏览器环境中，native元素通常是指DOM元素)，最后借助于Angular提供的强大的依赖注入特性，我们就可以轻松地访问到native元素。
ElementRef的定义
exportclassElementRef{
publicnativeElement:any;
constructor(nativeElement:any){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);}
问题解决了，但感觉不是很优雅？有没有更好的方案，答案是肯定的。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对象设置元素的背景颜色。
功能虽然已经实现了，但还有优化的空间么？
import{Component,ElementRef,ViewChild,AfterViewInit}from'@angular/core';
@Component({
selector:'my-app',
template:`WelcometoAngularWorld
Hello{{name}} 是不是感觉瞬间高大上了，不过先等等，上面的代码是不是还有进一步的优化空间呢？我们看到设置div元素的背景，我们是默认应用的运行环境在是浏览器中。前面已经介绍了，我们要尽量减少应用层与渲染层之间强耦合关系，从而让我们应用能够灵活地运行在不同环境。最后我们来看一下，最终优化后的代码：
import{Component,ElementRef,ViewChild,AfterViewInit,Renderer}from'@angular/core';@Component({
selector:'my-app',
template:`
WelcometoAngularWorld
Hello{{name}} 1.RendererAPI还有哪些常用的方法？
exportabstractclassRenderer{//创建元素abstractcreateElement(parentElement:any,name:string,
debugInfo?:RenderDebugInfo):any;//创建文本元素abstractcreateText(parentElement:any,value:string,
debugInfo?:RenderDebugInfo):any;//设置文本abstractsetText(renderNode:any,text:string):void;//设置元素PropertyabstractsetElementProperty(renderElement:any,propertyName:string,
propertyValue:any):void;//设置元素AttributeabstractsetElementAttribute(renderElement:any,attributeName:string,
attributeValue:string):void;//设置元素的ClassabstractsetElementClass(renderElement:any,className:string,
isAdd:boolean):void;//设置元素的样式abstractsetElementStyle(renderElement:any,styleName:string,
styleValue:string):void;
}
需要注意的是在Angular4.x+版本，我们使用Renderer2替代Renderer(AngularV2)。
2.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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。