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.
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
Post a Comment