angular - Renderer multiple selectRootElement Issue (with plnkr provided) -


i trying use renderer.selectrootelement elements component, described here.

everything works fine, unless select 1 element (plnkr).

as can see, have created component:

export class examplecomponent implements oninit{     @input() start: any;     @input() end: any;    constructor(public _renderer:renderer){    };      ngonchanges(){      }     ngoninit(){         console.log("ng on chan start date",this.start);         console.log("ng on init end date",this.end);         var container =  this._renderer.selectrootelement('.container');         console.log(container);            var inner1 =  this._renderer.selectrootelement('.inner1');         console.log(inner1);            var inner2 =  this._renderer.selectrootelement('.inner2');         console.log(inner2);        }  } 

when try run this, have error of :

exception: selector ".inner1" did not match elements in [{{exampledata.end}} in mainviewcomponent@3:65]

(however, in app, when first container found, none others found).

any ideas come from?

update

i found out directive not invoked - div class container gets added html.

enter image description here

do not use selectrootelement

its purpose not select random elements selector in components view.

simply see implementation in domrootrenderer

selectrootelement(selector: string): element {     var el = dom.queryselector(this._rootrenderer.document, selector);     if (isblank(el)) {       throw new baseexception(`the selector "${selector}" did not match elements`);     }     dom.clearnodes(el);     return el;  } 

do see interesting there? it's removing nodes inside element! why that? because purpose it's grab root element! 1 root element? sound familiar?

<my-app>     loading... </my-app> 

yes! that's root element. okay then, what's wrong using selectrootelement if want grab element? returns element without children , nothing changes in view! well, can still use of course, defeating purpose , misusing people dynamiccomponentloader#loadasroot , subscribing manually eventemitter.

well, after name, selectrootelement, says pretty does, doesn't it?

you have 2 options grab elements inside view, , 2 correct options.

  • using local variable , @viewchild
<div #myelement>...</div>  @viewchild('myelement') element: elementref;  ngafterviewinit() {    // this.element } 
  • create directive grab element want
@directive({     selector : '.inner1,inner2' // specify children     // or make 1 generic     // selector : '.inner' }) class children {}  template : `     <div class="container">         <div class="inner1"></div>         <div class="inner2"></div>          <!-- or 1 generic             <div class="inner"></div>             <div class="inner"></div>         -->     </div> ` class parent (     @viewchildren(children) children: querylist<children>;     ngafterviewinit() {         // this.children     } ) 

Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -