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.144610.tw/newsshow/211.html


關鍵詞

最新案例

聯系電話 400-6065-301

留言

(-^O^-)MG魔术兔_官方版 单机麻将四人不联网 天津十一选五基本走 福利彩票怎么玩 江西兜趣麻将赣州冲关 广西快三计划是真的吗 可邀请的二人麻将 手机捕鱼怎么下载 黑龙江11选5同步开奖 浙江12开奖结果走势 快船vs开拓者 黑龙江十一选五开奖查询 981游戏中心官网 麻将棋牌辅助器通用 亿客隆 三分彩开奖 大唐麻将山西怎么代理