Angular4里ElementRef的使用方法

　　这次给大家带来Angular4里ElementRef的使用方法，Angular4里ElementRef使用的注意事项有哪些，下面就是实战案例，一起来看一下。

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

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

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

　　export class ElementRef{

　　public nativeElement:any;

　　constructor(nativeElement:any){this.nativeElement=nativeElement;}

　　}

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

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

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

　　selector:'my-app',

　　template:`

　　<h1>Welcome to Angular World</h1>

　　<p>Hello{{name}}</p>

　　`,

　　})export class AppComponent{

　　name:string='Semlinker';constructor(private elementRef:ElementRef){let pEle=this.elementRef.nativeElement.querySelector('p');console.dir(pEle);

　　}

　　}

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

　　constructor(private elementRef:ElementRef){

　　setTimeout(()=>{//此处需要使用箭头函数哈，你懂的...

　　let pEle=this.elementRef.nativeElement.querySelector('p');

　　console.dir(pEle);

　　},0);}

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

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

　　selector:'my-app',

　　template:`

　　<h1>Welcome to Angular World</h1>

　　<p>Hello{{name}}</p>

　　`,

　　})export class AppComponent{

　　name:string='Semlinker';//在构造函数中this.elementRef=elementRef是可选的，编译时会自动赋值//function AppComponent(elementRef){this.elementRef=elementRef;}constructor(private elementRef:ElementRef){}

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

　　}

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

　　功能虽然已经实现了，但还有优化的空间么？

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

　　 Component({

　　selector:'my-app',

　　template:`<h1>Welcome to Angular World</h1>

　　<p#greet>Hello{{name}}</p>`,

　　})export class AppComponent{name:string='Semlinker';

　　 ViewChild('greet')

　　greetp:ElementRef;

　　ngAfterViewInit(){this.greetp.nativeElement.style.backgroundColor='red';

　　}

　　}

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

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

　　selector:'my-app',

　　template:`

　　<h1>Welcome to Angular World</h1>

　　<p#greet>Hello{{name}}</p>

　　`,

　　})export class AppComponent{

　　name:string='Semlinker'; ViewChild('greet')

　　greetp:ElementRef;constructor(private elementRef:ElementRef,private renderer:Renderer){}

　　ngAfterViewInit(){//this.greetp.nativeElement.style.backgroundColor='red';this.renderer.setElementStyle(this.greetp.nativeElement,'backgroundColor','red');

　　}

　　}

　　export abstract class Renderer{//创建元素abstract createElement(parentElement:any,name:string,

　　debugInfo?:RenderDebugInfo):any;//创建文本元素abstract createText(parentElement:any,value:string,

　　debugInfo?:RenderDebugInfo):any;//设置文本abstract setText(renderNode:any,text:string):void;//设置元素Property abstract setElementProperty(renderElement:any,propertyName:string,

　　propertyValue:any):void;//设置元素Attribute abstract setElementAttribute(renderElement:any,attributeName:string,

　　attributeValue:string):void;//设置元素的Class abstract setElementClass(renderElement:any,className:string,

　　isAdd:boolean):void;//设置元素的样式abstract setElementStyle(renderElement:any,styleName:string,

　　styleValue:string):void;

　　}

　　需要注意的是在Angular 4.x+版本，我们使用Renderer2替代Renderer(Angular V2)。

　　export abstract class Renderer2{abstract createElement(name:string,namespace?:string|null):any;abstract createComment(value:string):any;abstract createText(value:string):any;abstract setAttribute(el:any,name:string,value:string,namespace?:string|null):void;abstract removeAttribute(el:any,name:string,namespace?:string|null):void;abstract addClass(el:any,name:string):void;abstract removeClass(el:any,name:string):void;abstract setStyle(el:any,style:string,value:any,

　　flags?:RendererStyleFlags2):void;abstract removeStyle(el:any,style:string,flags?:RendererStyleFlags2):void;abstract setProperty(el:any,name:string,value:any):void;abstract setValue(node:any,value:string):void;abstract listen(

　　target:'window'|'document'|'body'|any,eventName:string,

　　callback:(event:any)=>boolean|void):()=>void;

　　}

　　以上就是Angular4里ElementRef的使用方法的详细内容，更多请关注php中文网其它相关文章！　　

　　转载请注明:潍坊网站制作:http://www.mfdream.com/newsshow/211.html