Angular4里ElementRef的使用方法

2018.04.16 潍坊网站制作

118

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


关键词

最新案例

联系