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://h-waiyucheng.com/newsshow/211.html


关头词

最新案例

接洽德律风 400-6065-301

留言